0

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

这是我的示例代码：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 });
  };
}

4

1 回答 1

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});
于 2019-08-23T20:43:08.833 回答