Redux dispatch 导致组件本地状态重置

Posted 2023-03-10

【中文标题】Redux dispatch 导致组件本地状态重置

【英文标题】：Redux dispatch causing component local state to reset

【发布时间】：2018-08-06 01:14:14

【问题描述】：

我将 Redux 与 React 一起使用。我正在使用this.state（组件本地状态）来保存组件特定的变量。问题是每当我调度一个动作（获取动作）和存储更新（挂载）时，我的组件状态都会重置为初始状态。

这是我的组件的正确行为吗？在第二次挂载（重新渲染）时，组件的状态是否应该重置？ 如果 (1) 为真，有没有办法在 this.state 从 Redux 存储接收新的 props 时保留某些变量值？我不希望将所有组件的本地状态存储在 Redux 中。

【问题讨论】：

不，通常不应该，但您的代码中可能有不良做法，如果没有发布任何代码，很难说

谢谢@DominicTobias，很高兴知道。知道这让我更深入地研究了我的代码，看起来它可能是 react-router-dom 导致 /> 组件安装在道具更新上。不知道为什么...故障排除仍在继续。非常感谢！

您在哪个生命周期方法中初始化您的状态？它应该在构造函数中

我在构造函数中定义它。类 LoginForm_UsrPwd_Step1 扩展 React.Component constructor(props) super(props) this.state = usernameInput: '', passwordInput: ''

尤里卡！！我找到了原因。我以错误的方式实现了 react-router-dom Route 组件。我正在使用路由器组件功能 /> 然后重新安装其子组件。相反，我应该在 Router 组件中使用 render 函数。使用构造函数来实例化组件状态现在就像一个魅力。我会在几乎空无一人的办公室里再跑几圈胜利（有点尴尬）然后嘎吱嘎吱地走:) 谢谢你们的支持！真的很感激。

【参考方案1】：

原因：我以错误的方式实现了 react-router-dom Route 组件。我使用的是路由器组件功能

<Router component=()=><Login / >/>

然后会重新挂载子组件。

解决方案：使用Router组件中的render功能。例如

<Router render=()=><Login / >/>