创建新事件时更新 react-big-calendar 组件

Question

我正在使用 react-big-calendar，并希望用户能够在将鼠标拖到日历上以根据 create events demonstration 选择日期/时间范围时创建新事件。

但是，我编写的代码不会在成功创建事件时重新渲染组件。用户可以创建一个新事件，如果用户选择另一个视图（例如议程），它将显示 - 然后将出现在所有视图中。但是，根据演示，它不会立即显示在当前视图中。

我很确定这个问题的答案在于 useEffect；但我绕着圈子试图弄清楚。

import React, { useState  } from 'react';
import './App.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

function MyCalendar() {
    const localizer = momentLocalizer(moment)
    const [eventsList, setEventsList] = useState([]);

    function handleSelect ({ start, end }) {
        const title = window.prompt('New Event name')
        if (title) {
            var newEvent = {
                start: start,
                end: end,
                title: title 
            }
            let updateEventsList = eventsList;
            updateEventsList.push(newEvent);
            setEventsList(updateEventsList);
        }
    };

    return (
        <div>
        <Calendar
        selectable
        defaultView="week"
        defaultDate={new Date()}
        localizer={localizer}
        events={eventsList}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
        onSelectSlot={handleSelect}
        />
        </div>
    )
}

function App() {
    return (
        <div>
        <MyCalendar />
        </div>
    );
}

export default App;

Answer 1

React 不喜欢 mutatiton，因此您的代码会出错。

你需要改变你的功能

  function handleSelect({ start, end }) {
    const title = window.prompt("New Event name");
    if (title) {
      var newEvent = {
        start: start,
        end: end,
        title: title
      };
      setEventsList([...eventsList, newEvent]);
    }
  }

在这个函数中我只改变了这些字符串

let updateEventsList = eventsList;
updateEventsList.push(newEvent);
setEventsList(updateEventsList);

我就是这么做的

setEventsList([...eventsList, newEvent]);