完整日历 - 无法刷新反应中的事件

Question

我在我的 React 项目中使用完整日历。尽管我对状态进行了更新，但我无法刷新日历。

这是我的示例代码：https://codesandbox.io/embed/fullcalendar-react-jp7n1

在此示例中，我在用户单击“更改标题”按钮时更改了事件的标题，但没有任何更改。我有什么想念的吗？

感谢您的帮助。

import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction"; 
import "./styles.css";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

export default class DemoApp extends React.Component {
  calendarComponentRef = React.createRef();

  state = {
    calendarWeekends: true,
    calendarEvents: [
      // initial event data
      { title: "Event 1", start: new Date() },
      { title: "Event 2", start: new Date() },
      { title: "Event 3", start: new Date() }
    ]
  };

  render() {
    return (
      <div className="demo-app">
        <div className="demo-app-top">
          <button onClick={this.changeTitle}>Change title</button>
        </div>
        <div className="demo-app-calendar">
          <FullCalendar
            defaultView="dayGridMonth"
            header={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            ref={this.calendarComponentRef}
            weekends={this.state.calendarWeekends}
            events={this.state.calendarEvents}
          />
        </div>
      </div>
    );
  }

  changeTitle = () => {   
    let events = [...this.state.calendarEvents];
    events[0].title = new Date().toTimeString();
    events[1].title = new Date().toTimeString();

    this.setState({ calendarEvents: events });
  };
}

Answer 1

完整日历使用深度相等性检查来测试更改，并且由于数组中事件的对象未更改（通过引用它是同一对象），因此不会检测到更改。您需要创建一个新的事件对象来更新它。

let events = [ ...this.state.calendarEvents];

    events[0] = {
      title: new Date().toTimeString(),
      start: events[0] .start
    }
    events[1] = {
      title: new Date().toTimeString(),
      start: events[1].start
    }

    this.setState({ calendarEvents: events});

完整日历 - 无法刷新反应中的事件

Full calendar - Can not refresh events in react

fullcalendar