反应FullCalendar更新状态后无法向日历添加新事件 [英] React FullCalendar Unable to add new event to the calendar after updating the state

问题描述

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

I am not really sure what I am doing wrong here. Maybe it is a simple error. Any help would be appreciated. I get the following error in react.

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

The inital render is fine but the error occurs on the rerender with the new state.

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

推荐答案

selectable选项和钩子存在问题.如果您选择了它，它应该可以工作.或者，您需要在处理状态之前传递对日历的引用并取消选择.

There is an issue with the selectable option and hooks. If you take out selectable it should work. Alternatively, you need to pass a reference to the calendar and unselect it before manipulating the state.

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

这篇关于反应FullCalendar更新状态后无法向日历添加新事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！