父道具在React / Redux中更新太晚

Question

I have a parent component (parent.js) that calls two children components (child1.js, child2.js). This is all on one tab - child1 is basically an input form to add an event on a calendar and child2 is the calendar.

Once I create the event from child1, the event doesn't render on the calendar until I click on another tab and then back to this one, or I refresh the page. My goal is that once the event gets created, the calendar should update automatically without having to click away.

The problem is, the prop that's being passed down to child2 (array of events) isn't updating on time.

This is a small portion of 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}
  />
}

This is child1, this function is called when the user submits the event. It adds a shift to the database

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

Finally, this is child2. I'm calling componentDidUpdate() to update the calendar, but this.props.volunteers does not include the newest event that was already successfully added to the database.

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

Answer 1

I would look into componentDidUpdate() documentation . this function take 2 parameters componentDidUpdate( prevProps, prevState ) in this function you can compare this.props to prevProps . If there is a change between the two then perform the logic to update the component.