React FullCalendar 更新状态后无法将新事件添加到日历答案

【问题标题】：React FullCalendar Unable to add new event to the calendar after updating the stateReact FullCalendar 更新状态后无法将新事件添加到日历
【发布时间】：2020-07-15 07:33:40
【问题描述】：

我不确定我在这里做错了什么。也许这是一个简单的错误。任何帮助，将不胜感激。我在反应中收到以下错误。

初始渲染很好，但在使用新状态重新渲染时出现错误。

import React, { useReducer, useRef, useState } from 'react';
import * as reducer from './reducers'
import * as actions from './actions'
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
//import events from '../Columns/events'
const _events = [
    { title: "event 1", start: "2020-04-01", end: "2020-04-03" },
    { title: "event 2", start: "2020-04-04", end: "2020-04-06" }
  ]
const Calendar = props => {
    //const [calendarEvents, dispatchEvents] = useReducer(reducer.events, _events)
    const [calendarEvents, setEvents] = useState(_events)

    const calendarRef = useRef()

    function confirmation(dateInfo) {
        console.log(`dateInfo:`, dateInfo);
        let answer = window.confirm("create event?")
        if(answer){
            const payload = { title: "event " + calendarEvents.length, start: "2020-04-07", end: "2020-04-09" }
            //dispatchEvents({type: actions.EVENT_ADD, payload})
            setEvents([...calendarEvents, payload])
            //calendarRef.current.props.events = [...calendarEvents, payload]
            console.log(calendarRef.current);
        }
    }
    debugger;
    return(
        <>
        <FullCalendar
        ref={calendarRef}
        defaultView="dayGridMonth"
        plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
        events={calendarEvents}
        editable
        eventResizableFromStart
        selectable
        //eventOverlap={false}
        dateClick={confirmation}
        eventBackgroundColor="#001532"
        eventColor="white"
        eventTextColor="white"
        header={{
            left: 'prev,next today',
            center: 'test title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        }}
        eventClick={console.log}
      />
        </>
    )
}

export default Calendar

【问题讨论】：

该错误意味着context 在该行上未定义。我不是反应专家，所以我不能告诉你为什么会这样，但也许可以使用它。

标签： reactjs fullcalendar fullcalendar-4

【解决方案1】：

可选选项和挂钩存在问题。如果你拿出可选择的，它应该可以工作。或者，您需要在操作状态之前传递对日历的引用并取消选择它。

import React, {useRef, useState} from 'react'
...
export default function MyCalendar() {
    const CalendarRef = useRef()
    const [events, setEvents] = useState([])

    function handleUpdateState(){

        const calendarApi = CalendarRef.current.getApi()
        calendarApi.unselect()

        let newEvents = [...events, { insert new event object }]

        setEvents(newEvents)

    }

    return (
        <FullCalendar ... />
    )
}

【讨论】：