Question

我在componentDidMount中有2个动作：

操作1使用虚拟数据启动状态。
操作2过滤状态。

但是当动作2发生时，动作1由于某种原因还没有运行，所以没有什么可以过滤的。

如果我在动作2上执行了setTimeout，它可以解决问题，但这不是一个好的解决方案。

以下是代码：

componentDidMount() {

    const filterBy = this.props.collection.filterBy

    // Action 1
    this.props.collectionActions.loadRandomItems() 

    if (this.props.page == 'my-items') {

        console.log(this.props.collection.items) 

        // Action 2
        this.props.collectionActions.filter({ ...filterBy, amOwner: true}, this.props.collection.items) 
    }
}

请注意，console.log显示一个空数组，但Action 1应该已经为该数组加载了项目，因此Action 2可以使用它。

Answer 1

嗯，this.props.collectionActions.loadRandomItems()你的商店确实更新了。问题是你的组件需要重新渲染以获得新的道具。这意味着在你的componentDidMount这个道具指向同一旧版道具。 componentDidMount不是处理道具更新的好地方。使用componentWillReceiveProps。

componentDidMount() {
    // Action 1
    this.props.collectionActions.loadRandomItems() 
}

componentWillReceiveProps(newProps) {
  if (newProps.page == 'my-items') {
    // Action 2
    const filterBy = newProps.collection.filterBy

    newProps.collectionActions.filter({ ...filterBy, amOwner: true}, this.props.collection.items) 
  }
}

componentDidMount中连续2个动作在React / Redux中不能同步工作？

1 个答案: