force update jQuery fullcalendar, после изменения проформы в React.js

Question

Я борюсь с обновлением 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> 
    ); 
    } 
} 

А вот класс, содержащий 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, которая добавляет новое событие в массив и чем я передать его Работодателю.

В EmployeesCalendar Я обновляю состояние событий в componentWillReceiveProps и передаю его плагину fullcalendar, заставляя его обновлять. Но fullcalendar никогда не обновляется.

Любые предложения?

Answer 1

Вместо '' refetchEventSources

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

Answer 2

ли вы имеете в виду jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.events); вместо jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event);, как вы написали?

Answer 3

Метод refetchEvents работал для меня, но только до тех пор, пока я не сконфигурировал события как функцию с обратным вызовом, а не как массив.

Вместо компонентаWillReceiveProps, я использовал 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? Я этого не пробовал.