Este es mi componente de calendario:
export default class DemoApp extends React.Component { today = new Date(); calendarRef = createRef(); ....Tengo una función de renderizado:
render() { const workMin = this.state.hours.map(item => item.startTime).sort().shift(); const workMax = this.state.hours.map(item => item.endTime).sort().pop(); this.getDateResult(); return ( <div className='demo-app'> {this.renderSidebar()} <div className='demo-app-main'> <FullCalendar ref={this.calendarRef} plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} headerToolbar={{ left: 'prev,next today', center: 'title' }} locale="hr" initialView='timeGridWeek' editable={true} selectable={true} selectMirror={true} dayMaxEvents={true} weekends={this.state.weekendsVisible} initialEvents={INITIAL_EVENTS} select={this.handleDateSelect} eventContent={renderEventContent} eventClick={this.handleEventClick} eventsSet={this.handleEvents} eventStartEditable={false} slotMinTime={workMin} slotMaxTime={workMax} validRange={{ start: this.today }} events={this.state.morningBgEvent} /> </div> </div> ) }Y esta es mi función:
getDateResult() { const calendarApi = this.calendarRef.current.getApi(); console.log(calendarApi.activeStart); }Error:
Cannot read properties of null (reading 'getApi')Solo quiero consola. Registrar el día de inicio de la vista de la próxima semana.
¿Por qué obtener este error?
Define una ref para su calendario y la pasa al elemento FullCalendar , que es correcto hasta ahora. pero está obteniendo el valor calendarRef antes de asignarlo a FullCalendar .
this.getDateResult(); // getting ref before assinging return ( <div className='demo-app'> {this.renderSidebar()} <div className='demo-app-main'> <FullCalendar ref={this.calendarRef} // assigning ref El uso componentDidMount garantizará que FullCalendar obtenga su ref y luego llame al método getDateResult correctamente.
Intente llamar a su getDateResult dentro del método de ciclo de vida de reacción. por ejemplo, si desea obtener el resultado en la fase inicial, llame al método getDateResult dentro de un componentDidMount .
componentDidMount() { getDateResult() }Además, con estructura de componente funcional con ganchos:
useEffect(() => { getDateResult() }, [])