如何在React函数组件中实现Redux状态变更时同步更新useState本地状态

核心问题是useState的初始值仅会在组件首次挂载时执行一次，后续Redux状态更新不会自动同步到本地状态，你可以通过useEffect监听Redux状态变化手动同步，同时注意保留本地已修改的表单数据不要被直接覆盖。

具体修改步骤 #

1. 引入useEffect钩子

import React, { useState, useEffect } from "react";

2. 在组件内添加监听Redux状态变化的副作用逻辑

const state = useSelector((state: RootState) => state.calc);
const [formsEQ, setformsEQ] = useState<FormEquation[]>([...state]);

// 新增以下代码
useEffect(() => {
  setformsEQ(prevLocalForms => {
    // 用Map存储本地已修改的表单，避免重复遍历
    const localFormMap = new Map(prevLocalForms.map(form => [form.name, form]));
    // 合并逻辑：已存在的表单保留本地修改，新增的表单使用Redux返回的初始配置
    return state.map(reduxForm => {
      return localFormMap.get(reduxForm.name) ?? {
        ...reduxForm,
        priorityList: reduxForm.inputs.map(input => input.name)
      }
    })
  })
}, [state])

注意事项 #

• 你的Redux reducer更新calc状态时必须返回新的数组引用，不能直接修改原数组：
  正确写法：return [...state, newCalcForm]
  错误写法：state.push(newCalcForm); return state
• 如果你不需要保留本地表单的修改，Redux状态更新时直接覆盖本地状态即可，简化useEffect逻辑为：

  useEffect(() => {
    setformsEQ([...state])
  }, [state])
  

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