Question

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

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();
}

有人可以建议我在这里做错什么吗？谢谢。

Answer 1

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

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

这就是the example in the docs中指定的componentDidUpdate中的设置状态应始终为有条件的的原因。在您的情况下，可能看起来像这样，您在其中比较相关道具以确认确实需要重新渲染：

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

Answer 2

如果您阅读React Docs，则会清除状态“您可以立即在componentDidUpdate（）中调用setState（），但请注意，必须将其包装在如上例中所示的条件下，否则会导致无限循环。”因此，使用您的功能，发生的事情是一样的。

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

2 个答案: