redux store dispatch 导致 React 中的 setState error()

Posted 2023-02-22

【中文标题】redux store dispatch 导致 React 中的 setState error()

【英文标题】：redux store dispatch leading to setState error() in React

【发布时间】：2017-04-21 23:04:27

【问题描述】：

我正在从组件渲染函数中调用一个 thunk。如果在初始应用程序加载调用 thunk 加载的组件时，它工作正常。但是，如果我在不同的路线上加载应用程序，然后转换到呈现调用 thunk 的组件的路线，我会收到以下错误：

警告：setState(...)：在现有状态期间无法更新 过渡（例如在render 或其他组件的 构造函数）。渲染方法应该是 props 的纯函数和 状态;构造函数副作用是一种反模式，但可以移动 到componentWillMount。

thunk 更改了 redux 存储状态，该状态不被应用程序中的任何组件使用，只是通过 getState() 在 thunk 中用于执行一些条件逻辑。如果我从 thunk 中删除调度 actionCreator 代码，错误就会消失。

我错过了什么？

【问题讨论】：

添加component，您将在其中获得此warning

【参考方案1】：

您只需要记住基本规则，您应该永远不要在组件的渲染函数中更改您的状态。相同的规则适用于您的组件状态以及 redux 存储状态。您在控制台上看到的警告是由于您在渲染中调度的操作。 重构您的代码，以便所有调度和状态更改都发生在其他生命周期方法中。

【讨论】：

我正在发送一些基于组件中条件 div 呈现的分析事件数据，因此我在该条件 div 中调用了 thunk。我该如何重构它？创建一个包含每个条件 div 的基于类的组件？

如果不查看您的代码，我无法直接告诉您，但如果您的 div 所依赖的条件依赖于提供给组件的 props，您可以将其放在 componentDidRecieveProps 中。跨度>

@AmoolyaSKumar, *componentWillReceiveProps :)

@free-soul 真的很抱歉，错字。 'componentWillReceiveProps' 是对的。