为什么会出现此错误:“不变违规:无法在现有状态转换期间更新”

IT技术 javascript reactjs react-native
2021-03-26 06:08:43

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

未捕获的错误:不变违规:setState(...):无法在现有状态转换期间更新(例如在 内render)。Render 方法应该是 props 和 state 的纯函数。

我怀疑这可能是在orsetState内部使用的结果setTimeoutsetInterval

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

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

编辑:

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

2个回答

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

如果它必须在渲染内部怎么办?我的意思是我仍然会得到一个无法阻止的错误,但唯一的解决方案是放置一个 if 语句来停止无限循环
2021-06-02 06:08:43

实现此目的的一种方法是使用 Flux 模式并让您的超时触发商店中的更改。这将导致更改传播到感兴趣的组件作为其生命周期的一部分。