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

Question

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

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

我相当确定这个问题的答案就在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 (
        
        
        
    )
}

function App() {
    return (
        
        
        
    );
}

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]);