reactjs - 即使 action/reducer 没有更改该值,状态值也会更改
问题描述
我正在使用相同的操作有效负载在具有相同内容的状态上设置两个不同的值。
这样我就可以在原始数据发生任何变化之前获得原始数据,并最终对它们进行比较,例如:
onLoadUserDataSuccess
userData: action.payload
originalUserData: action.payload
问题是,当我有一个更新用户数据但只更改 userData 值而不是 originalUserData 的操作时,我可以在 devtools 中看到两者都发生了变化。例子:
onUserDataUpdate
userData: action.payload
我能想象的唯一原因是,这是通过引用处理的?那么当 userData 值改变时 originalUserData 会自动改变吗?
我还尝试使用 WillMount 钩子将这些原始数据保存在组件状态中,但是如果我同时加载其他用户,因为组件不会重新安装,所以这不起作用,所以数据来自加载的第一个用户。
解决方案
正如预期的那样,经过大量阅读后,问题在于数组和对象是通过引用处理的,并且在处理动作有效负载时使用 react 和 redux 需要格外小心。
解决方案是创建一个函数,该函数将在每个嵌套级别上返回一个新状态。
这也可以通过 Immutable.js 和 immer 等其他库来完成。
更多关于不可变更新模式的信息在这里
推荐阅读
- python - 带有 Python 3.8 的 pyzbar 无法检测扫描文档中的二维码
- c++ - 这个自动模板扣除指南是否正确?
- java - Jenkins Pipeline 无法触发具有 Maven 存储库工件的参数化作业
- spring - SpringBoot Test - 可以针对默认应用程序上下文运行测试吗?
- reactjs - 无法使用“create-react-app”创建反应应用 nvm 与 npm 配置不兼容
- r - 检查变量和日期并将结果变异为按 id 分组的 1 或 0
- three.js - 从blender导出的gltf具有金属纹理且没有粗糙纹理被加载到粗糙纹理匹配金属纹理的three.js中
- pytorch - pytorch 数据集地图样式与可迭代样式
- python - 字典列表上的 Python 查询
- jquery - 使用 JQuery DataTables 选择后下拉菜单表调用需要额外单击