componentDidUpdate 错误是 React 限制嵌套更新的数量以防止无限循环如何解决此问题

Posted 2023-03-16

【中文标题】componentDidUpdate 错误是 React 限制嵌套更新的数量以防止无限循环如何解决此问题

【英文标题】：componentDidUpdate error is React limits the number of nested updates to prevent infinite loops how to fix this issue

【发布时间】：2020-09-06 10:51:10

【问题描述】：

已超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

 componentDidMount() 
this.setState(
  form_items: this.props.form_items,
);
console.log(this.props.form_items, this.props.init_values);

【问题讨论】：

您的组件可能存在编程错误。如果您从您的组件中分享更多代码，您将可以提供更多帮助。

您可能在其中无条件调用setState？请向我们展示完整的代码

请添加相关代码

你能检查一下这段代码吗

componentDidMount() this.setState( form_items: this.props.form_items, ); console.log(this.props.form_items, this.props.init_values); // if (this.props.init_values) // this.bindInitFormValues(this.props.init_values); // // console.log() // componentDidUpdate(nextProps, Props) if (this.props.init_values) this.bindInitFormValues(this.props.init_values); // console.log() this.handleAddBreederActionData(this.props.addBreedMomActionData);

【参考方案1】：

您必须注意 componentDidUpdate 是在 state 和 props 更改时调用的。现在，当您在 componentDidUpdate 中编写基于 prop 更改设置状态的登录时，您必须始终添加 previous 和 currentProps 之间的比较，否则会触发无限循环

你可以这样写

componentDidUpdate(prevProps) 
  if(this.props.init_values !== preProps.init_values) 
    this.bindInitFormValuesUpdate(this.props.init_values);
  
    console.log(this.props.init_values,this.props.form_items);
  if(this.props.addBreeMomActionData !== prevProps.addBreedMomActionData) 
    this.handleAddBreederActionData(this.props.addBreedMomActionData);
  

componentDidUpdate 的参数也是 prevProps 和 prevState 而不是 (nextProps, props)

此外，如果您从父级更改 addBreedMomActionData 和 init_values 的引用，即使您没有更新，您也可能需要执行 deepEqual 比较

componentDidUpdate(prevProps) 
  if(!_isEqual(this.props.init_values,preProps.init_values)) 
    this.bindInitFormValuesUpdate(this.props.init_values);
  
    console.log(this.props.init_values,this.props.form_items);
  if(!_.isEqual(this.props.addBreeMomActionData,prevProps.addBreedMomActionData)) 
    this.handleAddBreederActionData(this.props.addBreedMomActionData);
  

附：在上面的代码中，_.isEqual 是从 lodash 或 underscore 库中使用的。如果您愿意，您可以实现自己的版本

【讨论】：

正如我所说，您可能需要进行深度相等性检查

【参考方案2】：

componentDidUpdate(prevProps) 
  if (this.props.something !== prevProps.something) 
    doSomething;
  

你不是在比较道具，别忘了比较道具