更新时React Redux调度导致递归错误

React Redux dispatch on update causes recursion error

本文关键字：递归 错误 调度 React Redux 更新      更新时间：2023-09-26

我正在使用React（14.2）和Redux。我已经设置好了所有的东西并能正常工作，除了当我在更新时调度一个操作时，会发生递归循环。

componentWillMount() {
  const { wizardActions, valid, errors } = this.props
  wizardActions.setPropState({valid: valid, errors: errors})
}
componentWillUpdate(nextProps) {
  const { wizardActions } = this.props
  console.log('NP', nextProps)
  //*** IF I UNCOMMENT THE FOLLWOING LINES THE APP GOES INTO AN INFINTIE 
  // RECURSION LOOP...
  /*if(this.props !== nextProps) {
    wizardActions.setPropState({valid: nextProps.valid, errors: nextProps.errors})
  }*/
}

当前组件的道具发生更改时，如何更新Redux状态？我也在componentWillReceiveProps()中尝试过，它也做了同样的事情。

TIA！

当外部因素（如React Router）导致道具更改时，可以调度操作来响应道具更改。但是，您似乎希望调度操作以响应从Redux本身注入的道具的更改，这使其具有循环性。这不是你在Redux应该做的事情。

valid和errors来自哪里？如果它们由Redux管理，则无需在componentWillUpdate中调度操作——当您收到新值时，它们已在Redux状态下更新。如果它们是由具有本地状态的父组件管理的，请首先考虑将该状态移动到Redux，而不是使用两个真相来源（组件和存储）来复制它。

一般来说，在你的应用程序中，任何给定状态的真相都应该只有一个来源。这个真相来源可以是Redux商店、React组件或一些外部来源，但您不应该试图在生命周期方法中同步几个真相来源。

OK-为了让这一切顺利进行，我将if修改为prop-specific，如下所示：

componentWillUpdate(nextProps) {
  const { wizardActions } = this.props
  if(this.props.errors !== nextProps.errors) {
    wizardActions.setPropState({valid: nextProps.valid, errors: nextProps.errors})
  }
}

还有一些事情。。。

  1. 感谢所有的回复和其中一些的详细程度。。。正是@azium让我找到了一个行之有效的解决方案
  2. ComponentDidUpdate更多地用于DOM操作，而这不是我在这里所做的
  3. 关注的道具（有效和错误）由ReduxForm装饰器注入。ReduxForm确实将一些东西保持在Redux状态，但不是这些——它们实际上是注入的运行时道具

您不能使用componentDidUpdate挂钩有什么原因吗
在React文档中，他们注意到不要在componentWillUpdate中调用this.setState以避免无限循环。Redux的dispatch不是this.setState，但它会引起同样的效果。

相关文章：