时间戳

首页 > 解决方案 > 未捕获的不变违规：超出最大更新深度

javascript - 未捕获的不变违规：超出最大更新深度

问题描述

我正在尝试在函数完成后设置状态，但出现错误：

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我在函数完成后在回调中调用 setstate，所以我认为从我读过的内容来看这可以正常工作，但我似乎无法让它工作。

组件更新时运行函数 addStuff

componentDidUpdate() {
   this.addStuff(() => this.setState({"loading":false}))
}

完成时设置回调

addStuff(callback) {
    ...Does a bunch of stuff
    callback();
}

谁能建议我在这里可能做错了什么？谢谢。

标签： javascriptreactjs

解决方案

无限循环的原因是您没有将您包装setState在条件中，而是在回调中。

所以我认为发生的是，一旦您的组件更新，setState就会调用，这会触发重新渲染，这意味着componentDidUpdate被调用，设置状态，触发重新渲染，调用componentDidUpdate等。

这就是为什么设置状态componentDidUpdate应该始终是有条件的，如文档中的示例中所述。在您的情况下，它可能看起来像这样，您可以在其中比较相关道具以验证您确实需要重新渲染：

componentDidUpdate(prevProps) {
  if (this.props.relevantProp!== prevProps.relevantProp) {
    this.addStuff(() => this.setState({"loading":false}))
  }
}

推荐阅读