javascript - 为什么会出现这个错误 : "Invariant Violation: Cannot update during an existing state transition"

Question

我似乎在一个大型应用程序中遇到了这个错误(但我不确定在哪里):

Uncaught Error: Invariant Violation: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

我怀疑这可能是在 setTimeout 或 setInterval 中使用 setState 的结果。

这引出了我真正的问题:为什么会存在这个错误？是否有一些概念上的原因我错过了为什么 ReactJS 不只是排队状态和 Prop 更改？我猜是否有原因，它与应用程序复杂性和/或避免竞争条件有关...

我的下一个问题是:在 React 之外(例如在某些异步事件期间)更新组件的正确方法是什么，以便不会发生此错误？

编辑:

在进一步深入研究这个问题之后，罪魁祸首似乎实际上是我正在使用的底层平台(ElectronJS，正式名称为 Atom Shell)。基本上，ElectronJS 将 Chromium 和 NodeJS 结合在一起。我正在使用一个 NodeJS API 来做一些异步的事情，当它完成时，ElectronJS 会返回到它停止的调用堆栈，完全绕过事件循环，从而导致与 React 的竞争条件。

Answer 1

问题是 setState 会导致重新渲染(可能取决于 shouldComponentUpdate)。如果您在 render 函数中有一个 setState 调用，它会触发另一个渲染。您可能会陷入重新渲染的无限循环。没有什么可以阻止您使用 setState 作为某些异步操作的结果(事实上它很常见)。只要它不在状态更新时运行的组件的 render 或其他生命周期方法中就没问题(shouldComponentUpdate 是另一个，因为你最终以同样的方式无限循环)。