Javascript 创建新事件时更新大型日历组件

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

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

我相当肯定这个问题的答案在于使用效果；但我在兜圈子，想弄明白

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;

import React，{useState}来自“React”；
导入“/App.css”；
导入'react big calendar/lib/css/react big calendar.css'；
从“react big Calendar”导入{Calendar，momentLocalizer}
从“时刻”导入时刻
函数MyCalendar（）{
常量定位器=力矩定位器（力矩）
const[eventsList，setEventsList]=useState（[]）；
函数handleSelect（{start，end}）{
const title=window.prompt（'新事件名称'）
如果（标题）{
var newEvent={
开始：开始，
完:完,，
标题：标题
}
让updateEventsList=eventsList；
updateEventsList.push（newEvent）；
setEventsList（updateEventsList）；
}
};
返回(
)
}
函数App（）{
返回(
);
}
导出默认应用程序；
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]);

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

你能添加你的“react big calendar/lib/css/react big calendar.css”和“react big calendar/lib/css/react big calendar.css”文件吗？我想帮助你，但是没有css很难理解发生了什么：）谢谢你的评论，我已经将css复制并粘贴到了pastebin：好的，我会尽力解决你的问题谢谢你的帮助，我认为这与CSS无关；但是如果我知道我就不会问了！你能添加你的“react big calendar/lib/css/react big calendar.css”和“react big calendar/lib/css/react big calendar.css”文件吗？我想帮助你，但是没有css很难理解发生了什么：）谢谢你的评论，我已经将css复制并粘贴到了pastebin：好的，我会尽力解决你的问题谢谢你的帮助，我认为这与CSS无关；但是如果我知道我就不会问了！最好使用concat或rest参数。谢谢你，我花了很多时间在useffect上乱搞；完全错了。非常感谢。我很高兴能帮助你。如果你有什么问题，可以在这里给我写信，我会尽力帮助你：）我喜欢你的项目，最好使用concat或rest参数。谢谢你，我花了很多时间在useffect上瞎搞；完全错了。非常感谢。我很高兴能帮助你。如果你有什么问题可以在这里给我写信，我会尽力帮助你：）我喜欢你的项目