在react js中创建新事件时更新日历

Question

我正在使用react-big-calendar。我能够发布新事件，并且当我引用页面时，日历中会显示比最新事件要多的页面，但是我想在reactjs中实现这一点而无需刷新页面。这是我的代码。

这用于创建新事件

   slotSelected(slotInfo) {
    console.log(slotInfo);
    let provider_id = 1;

    axios.post('/api/v1/provideravailability/' + provider_id + '/store', slotInfo, {
        headers: {
            'x-api-key': 'some_key',
            'Content-Type': 'application/json',
        }
    }).then(response => {

        if ('SUCCESS' === response.data.response) {
            this.fetchTutorFreeSlots(response);

        }

    }).catch(error => {
        console.log(error.response)
    })
}

eventSelected(eventInfo) {
    console.log(eventInfo);
}

这是页面加载时

    componentDidMount() {

    let provider_id = 1;
    let slots = [];
    axios.get('/api/v1/provideravailability/' + provider_id + '/fetch', {
        headers: {
            'x-api-key': 'some_key',
            'Content-Type': 'application/json',
        }
    }).then(response => {
        if (response.data.response === "SUCCESS") {
            this.fetchTutorFreeSlots(response);
        }

    }).catch(error => {
        console.log(error.response)
    })
}

获取

    fetchTutorFreeSlots(response) {
    let availableSlots = response.data.data;

    var freeSlots = availableSlots.map(obj => {

        var slotObj = {};
        delete   obj.duration;

        slotObj['start'] = new Date(obj.start * 1000);
        slotObj['end'] = new Date(obj.end * 1000);
        slotObj['title'] = "Book";
        return slotObj;
    });

    this.setState({availability: freeSlots});
    this.render(); // I want to update calendar view here
}

    render() {

    return <MyCalendar selectable={this.state.selectable} allEvents={this.state.availability}
                       eventSelected={this.eventSelected}
                       slotSelected={this.slotSelected}/>
}const calendarStyle = {
marginTop: '10px'

};

这就是我使用日历的方式。

const MyCalendar = props =>（

<div id="mycalendar" style={calendarStyle}>
    <Calendar
        defaultDate={new Date()}
        defaultView="day"
        events={props.allEvents}
        style={{height: "50vh", width: "60vh"}}
        selectable={props.selectable}
        onSelectSlot={props.slotSelected}
        onSelectEvent={props.eventSelected}
    />

</div>

）;

API很好并且返回正确的格式