Estoy tratando de implementar el 'calendario grande de reacción' en mi aplicación. La forma en que lo estoy llenando con eventos funciona, pero solo muestra estos eventos cuando el calendario se vuelve a representar (presionando un botón, haciendo clic en un evento, etc.). Supongo que tiene algo que ver con el estado de uso que solo se llena después de que el calendario se haya procesado, pero realmente no tengo idea de cómo solucionarlo.
Obtengo mis datos a través de una solicitud de Axios a una API privada desde la función getCalendarData().
Realmente agradecería si alguien pudiera ayudarme con esto, no puedo encontrar algo como esto en ningún lado en línea.
const CalendarList = (props) => { const[calendarEvents, setEvents]= useState([]) const authAxios = axios.create({ headers: { Authorization: 'Bearer ' + props.accesToken } }) useEffect(() => { const calendarData = getCalendarData(); setEvents(calendarData); }, []) const getCalendarData = () => { let eventsList = [] authAxios.get(url1).then((response) => { if(response.status === 200) { response.data.map((course) => { authAxios.get(url2).then((response) => { if(response.status === 200) { response.data.map((assignment) => { let startDate = new Date(Date.parse(assignment.due_at)) startDate.setUTCHours(0,0,0,0) const endDate = new Date(Date.parse(assignment.due_at)) if(!Number.isNaN(endDate)) { const event = { title: assignment.name, start: startDate, end: endDate, url: assignment.html_url, } if(!eventsList.includes(event)) { eventsList.push(event) } } }) } }) }) } }) return eventsList; } const locales = { "nl-be": require("date-fns/locale/nl-be") } const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales }) return ( <div className="calendarContainer" style={style}> <h2 style={{"color":props.menuColour}}>Calendar</h2> <div> <Calendar selectable localizer={localizer} events={calendarEvents} startAccessor="start" endAccessor="end" style={{height: 500, margin: "50px"}} /> </div> </div> ) } export default CalendarList;getCalendarData debería devolver una promesa que resuelva los datos. Su useEffect debería llamar a setEvents con los datos resueltos:
useEffect(() => { getCalendarData().then((calendarData) => setEvents(calendarData)); }, []); function getCalendarData() { return authAxios.get(url1).then((response) => { let eventsList = []; // some logic return eventList; }); }