Question

我有一个父组件（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
                })
            }
        }
    }

Answer 1

我会研究componentDidUpdate() documentation。此函数采用2个参数componentDidUpdate( prevProps, prevState )，在此函数中，您可以将this.props与prevProps进行比较。如果两者之间有变化，请执行逻辑以更新组件。

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

1 个答案: