在第二个组件中调用 react setState 时的无限循环答案

【问题标题】：Infinite loop while calling react setState in a second component在第二个组件中调用 react setState 时的无限循环
【发布时间】：2019-08-14 15:34:00
【问题描述】：

我正在使用 3 个相互传递数据的组件。在第二个当标志 passFlag 为真时，我正在尝试执行此操作。

     cancelCourse = () => {
            this.setState({
              settledAmount:'',
              creditAmount:'',
              productDescription:'',
              reasonCode:'',
              storedCollectedInformation:[]
            });
          }

          componentDidUpdate(){
            if(this.props.passFlag === true){
              this.cancelCourse();
            }
          }

我不断收到无限循环，并显示以下错误消息。

invariant.js:42 Uncaught Invariant Violation：超过最大更新深度。当组件在 componentWillUpdate 内重复调用 setState 或组件更新。 React 限制了嵌套更新的数量以防止无限循环。

请问我该如何解决这个问题？

我要做的就是将表单上的控件重置为空。

【问题讨论】：

我是新手。我该如何解决这个问题或以更好的方式编写它？
当您发出cancelCourse() 时，您正在调用setState()，然后它会调用生命周期事件componentDidUpdate()，因为组件的状态已更改。

标签： reactjs

【解决方案1】：

尝试改变条件。像这样的。

componentDidUpdate(prevProps){
   if(this.props.passFlag === true && this.props.passFlag != prevProps.passFlag){
    this.cancelCourse();
            }
          }

让我知道这是否有效

【讨论】：

对不起，我没有完成就错误地提交了。你现在可以检查。让我知道它是否有效
这行得通。能否请您解释一下，特别是为什么它与我的初始代码不同？
是的，实际上我所做的是将您当前的道具与之前的状态进行了比较。例如，如果 passFlag 最初为 false，然后变为 true，则只有此条件有效。如果道具没有变化，那么这个条件将失败，你不会陷入无限循环。给我投赞成票，我很有帮助:)
这开始间歇性地工作。它工作一次，下一次就不再工作了。还有其他想法吗？
你能告诉我 passFlag 何时以及如何更改为 false 吗？因为根据条件，如果道具有任何变化，那么只有this.cancelCourse() 会触发。因此，如果这不起作用，则意味着某处条件失败

【解决方案2】：

这里componentDidUpdate()的问题是它调用this.cancelCourse()，改变了状态，然后再次调用componentDidUpdate()，循环重复。

如果我理解您的正确尝试，您可以使用 componentWillReceiveProps() 做一些事情：

componentWillReceiveProps(nextProps) {
  if (nextProps.passFlag !== this.props.passFlag) {
       this.cancelCourse();
  }
}

请注意，componentWillReceiveProps() 将来会被弃用。

【讨论】：

如果 componentWillReceiveProps() 将被弃用，这不是一个有效的解决方案。提供替代品...