Soy nuevo en ReactJs y estoy tratando de clasificar el componente de FullCalendar en un componente funcional. Vi algunos tutoriales, pero cuando lo hice, sigo recibiendo este error.
Uncaught TypeError: Cannot read properties of null (reading 'getApi')y busqué un componente funcional para FullCalendar pero no encontré nada útil, este es mi componente de clase:
import React from "react"; import FullCalendar from "@fullcalendar/react"; import './Fullcalendar.css' import dayGridPlugin from "@fullcalendar/daygrid"; import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick export default class DemoApp extends React.Component { calendarComponentRef = React.createRef(); state = { calendarWeekends: true, calendarEvents: [ // initial event data { title: "Event Now", start: "2022-03-21", backgroundColor: "red" } ] }; render() { setTimeout(() => { let calendarApi = this.calendarComponentRef.current.getApi(); calendarApi.gotoDate(this.props.date); // call a method on the Calendar object }); return ( <div> <div className="demo-app"> <div className="demo-app-calendar"> <FullCalendar id="fullCalendar" contentHeight={720} firstDay={1} defaultView="dayGridMonth" plugins={[dayGridPlugin, interactionPlugin]} ref={this.calendarComponentRef} events={this.state.calendarEvents} /> </div> </div> </div> ); } }y esto es lo que hice para convertirlo en un componente funcional:
import React, { useRef } from "react"; import FullCalendar from "@fullcalendar/react"; import './Fullcalendar.css' import dayGridPlugin from "@fullcalendar/daygrid"; import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick function Fullcalendar({date}) { const calendarComponentRef = useRef(null); setTimeout(() => { let calendarApi = calendarComponentRef.current.getApi(); calendarApi.gotoDate(date); }); return ( <div> <div className="demo-app"> <div className="demo-app-calendar"> <FullCalendar id="fullCalendar" contentHeight={720} firstDay={1} defaultView="dayGridMonth" plugins={[dayGridPlugin, interactionPlugin]} ref={calendarComponentRef} /> </div> </div> </div> ) } export default FullcalendarProbé y busqué pero no sé qué tengo que hacer.
Parece que está configurando un tiempo de espera que no tiene tiempo asociado, por lo que se ejecutará de inmediato. Intenta obtener el componente de calendario, pero eso parece ser incluso antes de que haya devuelto el componente de calendario de su función, por lo que esperaría que el objeto de calendario aún no exista, razón por la cual su código no puede encontrarlo .
Además, todo lo que está haciendo con ese objeto API es establecer inmediatamente la fecha del calendario, pero eso es algo que puede hacer directamente dentro de las opciones del calendario, si desea que el calendario comience en una fecha específica.
¿Por qué no simplemente agregar
initialDate={date} a las opciones en la sección <FullCalendar en su lugar?