类型错误：无法读取未定义的属性'view' [FullCalendar-React] *已解决

Question

嘿，我试图通过模式形式添加事件，但当我提交它时，会出现这个错误：
我在react中执行配方调度程序，我在上面使用fullCalendar，我使用了开发人员给出的代码，它使用命令"prompt"请求标题，然后创建事件，所以我确实尝试添加了一个表单，但我被这个错误卡住了：

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个参数，其中第三个是作为undefined的selectInfo

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

然而，当您调用它时，您只传递了2个参数。

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;