在React.js中更改道具后强制更新jQuery fullcalendar

我正在努力更新jQuery fullcalendar，它被包装在React after events prop change中

下面是包含数据和日历的类：

export default class Calendar extends Component {
  constructor(props) {
    super(props);
    this.addEvent = this.addEvent.bind(this);
    this.state = {
      events: [
        {
          title: 'Sometitle',
          date: moment(Date.now()),
          allDay: false,
        },
      ],
    };
  }

  addEvent() {
    const date = moment(Date.now()).add(1, 'hour');
    this.setState({
      events: [].concat(this.state.events, [{
        title: 'Sometitle 1',
        date,
        allDay: false,
      }]),
    });
  }

  render() {
    return (
      <div className="allow-scroll">
        <button onClick={this.addEvent}> Add event</button>
        <EmployeesCalendar events={this.state.events} />
      </div>
    );
  }
}

导出默认类日历扩展组件{
建造师（道具）{
超级（道具）；
this.addEvent=this.addEvent.bind（this）；
此.state={
活动：[
{
标题：“Sometitle”，
日期：时刻（date.now（）），
全天：错，
},
],
};
}
addEvent（）{
const date=时刻（date.now（））.add（1，'hour'）；
这是我的国家({
事件：[].concat（this.state.events[{
标题：'Sometitle 1'，
日期，
全天：错，
}]),
});
}
render（）{
返回(
添加事件
);
}
}

下面是包含fullcalendar插件的类：

import React, { Component } from 'react';
import jQuery from 'jquery';

require('fullcalendar');

export default class EmployeesCalendar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      events: props.events,
    };
  }

  componentDidMount() {
    const { fullCalendar } = this;

    jQuery(fullCalendar).fullCalendar({
      events: this.state.events,
    });
  }

  componentWillReceiveProps(nextProps, nextState) {
    const { fullCalendar } = this;
    const { events } = nextState;
    this.setState({
      events: nextProps.events,
    }, () => {
      console.log(this.state.events);
      jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event);
    });
  }

  componentWillUnmount() {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar('destroy');
  }

  render() {
    return (
      <div ref={(calendar) => { this.fullCalendar = calendar; }} />
    );
  }
}

import React，{Component}来自'React'；
从“jQuery”导入jQuery；
要求（“完整日历”）；
导出默认类EmployeesCalendar扩展组件{
建造师（道具）{
超级（道具）；
此.state={
事件：道具，事件，
};
}
componentDidMount（）{
const{fullCalendar}=this；
jQuery（fullCalendar）.fullCalendar({
事件：this.state.events，
});
}
组件将接收道具（下一步、下一步状态）{
const{fullCalendar}=this；
const{events}=nextState；
这是我的国家({
事件：nextrops.events，
}, () => {
console.log（this.state.events）；
jQuery（fullCalendar.fullCalendar（'refetchEventSources'，nextrops.event'）；
});
}
组件将卸载（）{
const{fullCalendar}=this；
jQuery（fullCalendar）.fullCalendar（'destroy'）；
}
render（）{
返回(
{this.fullCalendar=calendar；}}/>
);
}
}

我有一个addEvent函数，它将新事件添加到数组中，然后将其传递给EmployeesCalendar

在EmployeesCalendar中，我更新组件中的事件状态将接收props，然后将其传递给fullcalendar插件，强制更新它。但完整日历从不更新

---

有什么建议吗

而不是“refetchEventSources”

jQuery(fullCalendar).fullCalendar('rerenderEvents');

---

而不是“refetchEventSources”

jQuery(fullCalendar).fullCalendar('rerenderEvents');

---

你的意思是

jQuery（fullCalendar.fullCalendar（'refetchEventSources'，nextrops.events'）

而不是

jQuery（fullCalendar.fullCalendar（'refetchEventSources'，nextrops.event））如您所写？
您的意思是
jQuery（fullCalendar.fullCalendar（'refetchEventSources'，nextrops.events'）
而不是
jQuery（fullCalendar.fullCalendar（'refetchEventSources'，nextrops.event））如您所写？
refetchEvents方法对我有效，但直到我将事件配置为回调函数而不是数组

我使用了componentDidUpdate，而不是componentWillReceiveProps，它是在状态或props实际更改后触发的。我认为componentWillReceiveProps会起作用，但这是一个比您需要的更早的事件。它给你一个改变状态的机会，你不需要这样做

  componentDidMount() {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar({
      events: (start, end, timezone, callback) => {
        callback(this.state.events);
      },
    });
  }

  componentDidUpdate(nextProps, nextState) {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar('refetchEvents');
  }

根据“FullCalendar将在需要新事件数据时调用此函数。当用户单击“上一步/下一步”或切换视图时会触发此函数。”在运行refetchEvents时也会触发此函数。也许也会有重播？我没有尝试过这个方法。
refetchEvents方法对我有效，但直到我将事件配置为带有回调的函数，而不是数组

我使用了componentDidUpdate，而不是componentWillReceiveProps，它是在状态或props实际更改后触发的。我认为componentWillReceiveProps会起作用，但这是一个比您需要的更早的事件。它给你一个改变状态的机会，你不需要这样做

  componentDidMount() {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar({
      events: (start, end, timezone, callback) => {
        callback(this.state.events);
      },
    });
  }

  componentDidUpdate(nextProps, nextState) {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar('refetchEvents');
  }

根据“FullCalendar将在需要新事件数据时调用此函数。当用户单击“上一步/下一步”或切换视图时会触发此函数。”在运行refetchEvents时也会触发此函数。也许也会有重播？我没有试过那个。
已经试过了，同样的用于
render
，
refetchEvents
Events准备好了，同样的用于
render
，
refetchEvents
Events是的，我已经注意到这个打字错误，它仍然不起作用。是的，我已经注意到这个打字错误，它仍然不起作用。