У меня есть родительский компонент (parent.js), который вызывает два дочерних компонента (child1.js, child2.js). Это все на одной вкладке - child1 - это, по сути, форма ввода для добавления события в календарь, а child2 - это календарь.
Как только я создаю событие из child1, оно не отображается в календаре, пока я не нажму на другую вкладку и не вернусь к этой, или я не обновлю страницу. Моя цель состоит в том, чтобы после создания события календарь обновлялся автоматически, не щелкая мышью.
Проблема в том, что реквизит, который передается child2 (массив событий), не обновляется вовремя.
Это небольшая часть parent.js
const mapStateToProps = state => ({
volunteers: selectors.volunteer.getAll(state)
})
changeState = () => {
console.log("changing state in parent")
this.setState({show: true})
}
render() => {
<NewShift
volunteers={this.props.volunteers}
makeShift={this.props.makeShift}
/>
<Index
volunteers={this.props.volunteers}
/>
}
Это child1, эта функция вызывается, когда пользователь отправляет событие. Добавляет сдвиг в базу данных
saveFood = () => {
const volunteer = this.props.getVolunteer(this.state.formInputFields.id)
this.props.makeShift({
...volunteer,
shift: {
role: volunteer.firstName,
date: this.state.formInputFields.date,
duration: 2,
notes: this.state.formInputFields.notes
}
})
this.props.changeState()
}
Наконец, это child2. Я вызываю componentDidUpdate () для обновления календаря, но this.props.volunteers не включает новейшее событие, которое уже было успешно добавлено в базу данных.
componentDidUpdate() {
console.log("Updated")
const calendar = this.state.c
/* Removes all events from calendar */
const events = calendar.getEvents()
for(var x = 0; x < events.length; x++) {
calendar.getEventById(events[x].id).remove()
}
/* Re-renders all events on calendar */
var volunteers = this.props.volunteers
for(var i = 0; i < volunteers.length; i++) {
var shift = volunteers[i].shift
for(var j = 0; j < shift.length; j++) {
calendar.addEvent({
id: j,
title: volunteers[i].firstName + ' ' + volunteers[i].lastName,
start: new Date(shift[j].date + 'T00:00:00'),
notes: shift[j].notes
})
}
}
}