TypeError: не удается прочитать свойство 'view' неопределенного [FullCalendar-React] * не решено

Question

эй, я пытаюсь добавить события с помощью модальной формы, но когда я отправляю ее, появляется эта ошибка: Я делаю планировщик рецептов в React, и я использую на нем fullCalendar, я использовал код, предоставленный разработчиками, и он использует командную строку, чтобы запросить заголовок, а затем создает событие, поэтому я попытался чтобы добавить форму, и я застрял в этой ошибке:

react-dom.development.js:475 Uncaught TypeError: Cannot read property 'view' of undefined
at Fullcalendar.formHandler (Fullcalendar.jsx:47)
at onSubmit (Fullcalendar.jsx:182)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
at executeDispatch (react-dom.development.js:584)
at executeDispatchesInOrder (react-dom.development.js:609)
at executeDispatchesAndRelease (react-dom.development.js:713)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)
at forEachAccumulated (react-dom.development.js:694)
at runEventsInBatch (react-dom.development.js:739)
at runExtractedPluginEventsInBatch (react-dom.development.js:880)
at handleTopLevel (react-dom.development.js:5803)
at batchedEventUpdates$1 (react-dom.development.js:24401)
at batchedEventUpdates (react-dom.development.js:1415)
at dispatchEventForPluginEventSystem (react-dom.development.js:5894)
at attemptToDispatchEvent (react-dom.development.js:6010)
at dispatchEvent (react-dom.development.js:5914)
at unstable_runWithPriority (scheduler.development.js:697)
at runWithPriority$2 (react-dom.development.js:12149)
at discreteUpdates$1 (react-dom.development.js:24417)
at discreteUpdates (react-dom.development.js:1438)
at dispatchDiscreteEvent (react-dom.development.js:5881)

код функций

 handleDateSelect = () => {
    this.setModalState(true);
  }

  formHandler = (e, formField, selectInfo) => {
    e.preventDefault();
    let title = this.state.formField.title;
    console.log(title);
    let calendarApi = selectInfo.view.calendar;

    calendarApi.unselect(); // clear date selection

    if (title) {
      console.log(title);
      calendarApi.addEvent({
        id: createEventId(),
        title,
        start: selectInfo.startStr,
        end: selectInfo.endStr,
        allDay: selectInfo.allDay,
      });
      this.setAlert2State(true);
    }
  }

и модальный код:

<Modal
         show={this.state.modalShow}
         onHide={() => this.setModalState(false)}
         centered
       >
         <Modal.Header closeButton>
           <div>
             <h1 className="logText">Entre na sua conta</h1>
           </div>
         </Modal.Header>
         <Modal.Body>
           <Form
             method="POST"
             onSubmit={(e) => this.formHandler(e, this.state.formField)}
           >
             <FormGroup>
               <Label for="title">Nome da receita</Label>
               <Input
                 type="text"
                 name="title"
                 id="title"
                 onChange={(e) => this.inputChangeHandler(e)}
                 value={this.state.formField.title}
                 required
               />
             </FormGroup>
             <Button type="submit" color="success">
               Entrar
             </Button>
           </Form>
         </Modal.Body>
       </Modal>

полный календарь:

<FullCalendar
          locale={ptLocale}
          editable={true}
          headerToolbar={{
            left: "",
            center: "title",
            right: "prev,next today",
          }}
          initialEvents={INITIAL_EVENTS}
          select={this.handleDateSelect}
          eventClick={this.handleEventClick}
          eventsSet={this.handleEvents}
          schedulerLicenseKey="CC-Attribution-NonCommercial-NoDerivatives"
          initialView="dayGridMonth"
          themeSystem="bootstrap"
          selectMirror={true}
          dayMaxEvents={true}
          selectable={true}
          droppable={true}
          plugins={[
            listPlugin,
            bootstrapPlugin,
            resourceTimelinePlugin,
            dayGridPlugin,
            interactionPlugin,
          ]}
        />

Answer 1

Этот метод ожидает три параметра:

formHandler = (e, formField, selectInfo) => { ...

Но вы предоставили только два:

onSubmit={(e) => this.formHandler(e, this.state.formField)}

Следовательно, эта строка не выполняется, потому что selectInfo не определен:

let calendarApi = selectInfo.view.calendar;

Answer 2

Мне кажется, что selectInfo возвращается как undefined в этой строке

let calendarApi = selectInfo.view.calendar;

Что еще интереснее, подпись formHandler получает 3 аргумента, где третий - selectInfo это выглядит как undefined

  formHandler = (e, formField, selectInfo) => {

Однако, когда вы вызываете его, вы передаете только 2 аргумента.

  onSubmit={(e) => this.formHandler(e, this.state.formField)}

Проблема в том, что вы не передаете аргумент