force update jQuery fullcalendar、React.jsの小道具変更後

Question

イベント小道具の変更後にjQuery fullcalendarをReactで更新するのに苦労しています。ここで

は、データ&カレンダーを含むクラスです。

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

そして、ここでは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; }} /> 
    ); 
    } 
} 

私は配列に新しいイベントを追加するaddEvent機能を持っていると私はそれを渡すよりも、 to EmployeesCalendar。

EmployeesCalendarでは、アップデートイベントのステータスはcomponentWillReceivePropsで、fullcalendarプラグインに渡して強制的に更新します。しかし、fullcalendarは決して更新されません。

提案がありますか？あなたが書かれている通りの代わりjQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event);のjQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.events);を代わりに 'refetchEventSources'

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

Answer 1

意味しますか？

Answer 2

の

Answer 3

refetchEventsメソッドは私のために働いていましたが、配列ではなくコールバックを持つ関数としてイベントを設定するまでは機能しませんでした。

componentWillReceivePropsの代わりに、私はcomponentDidUpdateを使用しました。これは、状態または小道具が実際に変更された後に起動されます。私は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 docによると、「ユーザーは前/次のクリックまたはビューを切り替えたときにFullCalendarはこれがトリガされた。それは、新たなイベントデータを必要とするたびに、この関数を呼び出します。」また、refetchEventsを実行するとトリガされるように見えます。たぶんrerenderEventsも？私はそれを試みなかった。