Question

嘿，我尝试通过模式形式添加事件，但是当我提交该错误时，就会显示此错误：
im在react和im上使用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

在我看来，selectInfo在这一行中以undefined的身份返回

let calendarApi = selectInfo.view.calendar;

更有趣的是formHandler签名接收3个参数，其中第三个是selectInfo出现的undefined

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

但是，当您调用它时，您只传递了两个参数。

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

有问题，您没有传递参数

Answer 2

此方法需要三个参数：

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

但是您只提供了两个：

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

因此，此行失败，因为未定义selectInfo：

let calendarApi = selectInfo.view.calendar;

TypeError：无法读取未定义[FullCalendar-React]的属性“ view” *未解决

2 个答案: