Force Update jQuery Fullcalendar, nach Requisite Änderung in React.js

Question

Ich kämpfe mit der Aktualisierung von jQuery Fullcalendar eingewickelt React nach Ereignissen Requisite ändern.

Hier ist die Klasse enthält Daten & Kalender:

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

Und hier ist enthalten Klasse die fullcalendar Plugin:

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

Ich habe addEvent Funktion, die ein neues Ereignis Arrays hinzugefügt und als ich es passieren zu EmployeesCalendar.

Im EmployeesCalendar aktualisiere ich den Status der Ereignisse in componentWillReceiveProps und übergebe es dann an das Vollkalender-Plugin, um es zu aktualisieren. Aber der Vollkalender wird nie aktualisiert.

Irgendwelche Vorschläge?

Answer 1

Statt 'refetchEventSources'

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

Answer 2

Meinten Sie jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.events); statt jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event); wie Sie geschrieben haben?

Answer 3

Die refetchEvents-Methode funktionierte für mich, aber erst, als ich Ereignisse als Funktion mit einem Callback und nicht als Array konfigurierte.

Anstelle von componentWillReceiveProps habe ich componentDidUpdate verwendet, das ausgelöst wird, nachdem Status oder Requisiten sich tatsächlich geändert haben. Ich denke, dass componentWillReceiveProps funktioniert, aber es ist ein früheres Ereignis als Sie brauchen. Es gibt Ihnen die Möglichkeit, den Status zu ändern, den Sie nicht benötigen.

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

Nach dem FullCalendar doc „FullCalendar wird diese Funktion aufrufen, wenn es neue Ereignisdaten benötigt. Diese wird ausgelöst, wenn der Benutzer prev/next oder schaltet Ansichten klickt.“ Es scheint auch ausgelöst zu werden, wenn Sie refetchEvents ausführen. Vielleicht auch renderEvents? Ich habe das nicht versucht.