React JS中Redux状态变化时如何正确更新local State

你当前的写法可以实现需求，但不属于推荐实践，存在冗余和潜在bug，具体问题和优化方案如下：

• 存在无意义的状态冗余：你将Redux中已经全局存储的person.name额外复制了一份到组件本地状态，还需要通过useEffect维护两者的同步关系，不仅增加了代码量，还提升了状态不一致的风险——一旦依赖项写错、或者Redux状态更新逻辑不符合预期，很容易出现本地状态和全局状态不同步的问题，平白多触发至少一次额外重渲染。
• 依赖项配置不合理：当前useEffect的依赖是整个personReduxState对象，只要Redux中data切片的更新导致person对象引用变化（哪怕name字段完全没有改动），就会触发effect执行，做无意义的本地状态更新。
• 存在低级拼写错误：本地状态定义时的变量名写为locatState（少写了字母l），后续调用的更新方法是setLocalState，实际运行时会直接抛出引用错误。

根据你使用这段逻辑的实际目的，选对应的方案即可：

• 如果本地不需要修改name值，只是要读取展示：完全不需要额外定义本地状态，直接从Redux取需要的字段使用即可，还能避免无效重渲染：

// 精确选择需要的字段，不要返回整个person对象
const personName = useSelector(({ data }) => data.person?.name);
// 组件内直接使用personName即可

• 如果需要基于Redux的name生成本地可编辑的副本（比如表单编辑场景，用户可以修改输入内容，提交时再同步回Redux）：不要用useEffect做自动同步，直接在useState初始化时读取Redux值即可，仅在明确需要重置本地值的时候手动触发更新：

const personReduxState = useSelector(({data}) => data.person);
// 初始化直接取Redux值，省去首次渲染后的effect同步步骤
const [localState, setLocalState] = useState({
  name: personReduxState?.name || ''
});

// 仅在明确需要重置（比如点击重置按钮、表单提交成功后）再同步Redux值到本地
const handleResetForm = () => {
  setLocalState({ name: personReduxState?.name || '' })
}

如果你确实需要做自动同步，不要监听整个person对象，把依赖项精确到实际用到的personReduxState?.name字段，减少无效触发。

• 如果只是需要基于Redux的name做计算派生值（比如拼接展示文案、做格式转换）：不需要定义本地状态，用useMemo做派生计算即可：

const person = useSelector(({data}) => data.person);
const displayName = useMemo(() => {
  return person?.name ? `当前用户：${person.name}` : '未设置昵称'
}, [person?.name])

内容的提问来源于stack exchange，提问作者abduljalil