时间戳

首页 > 解决方案 > React/Redux 中的父属性更新太晚

javascript - React/Redux 中的父属性更新太晚

问题描述

我有一个调用两个子组件（child1.js、child2.js）的父组件（parent.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
                })
            }
        }
    }

标签： javascriptreact-redux

解决方案

我会查看componentDidUpdate() 文档。此函数在此函数中采用 2 个参数componentDidUpdate( prevProps, prevState )，您可以将this.props其与prevProps. 如果两者之间发生变化，则执行更新组件的逻辑。

推荐阅读