反应FullCalendar更新状态后无法向日历添加新事件

Question

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

初始渲染很好，但在具有新状态的重新渲染上会发生错误。

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

Answer 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 ... />
    )
}