如何在React Hook Form中使用watch时保留Redux初始状态？

问题根源 #

核心问题出在两点：

1. React Hook Form未设置defaultValues，首次渲染时watch()返回的data.name为undefined
2. 依赖data的useEffect在首次渲染就执行dispatch，用undefined覆盖了Redux里初始的name: 'Lydia'，导致状态丢失

解决方案 #

1. 同步表单默认值与Redux初始状态

先让React Hook Form的表单默认值和Redux初始状态对齐，这样watch()首次拿到的就是正确初始值，而非undefined：

import { useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';

// 从Redux获取初始用户信息
const { UserInfos } = useSelector(state => state.infos);

// 初始化表单时绑定默认值
const { register, watch } = useForm({
  defaultValues: UserInfos
});

const data = watch();

useEffect(() => {
  // 仅当表单数据与Redux初始值不一致时，才触发dispatch
  if (JSON.stringify(data) !== JSON.stringify(UserInfos)) {
    dispatch(fetchData(data));
  }
}, [data, dispatch, UserInfos]);

2. 给Redux Reducer加容错判断

在Reducer里增加校验，避免空payload覆盖已有有效状态：

const InfosSlice = createSlice({
  name: 'infos',
  initialState: { 
    UserInfos: {
      name: 'Lydia',
    },
  },
  reducers: {
    fetchData: (state, action) => {
      // 仅当payload中存在有效name值时才更新状态
      if (action.payload?.name !== undefined) {
        state.UserInfos.name = action.payload.name;
      }
    },
  },
});

3. 多步骤表单场景优化（适配你的实际项目）

如果是包含大量数据的多步骤表单，建议：

• 每个步骤的表单默认值单独从Redux对应节点同步
• 监听单个字段而非全部数据，减少不必要的重渲染：

  // 只监听name字段，而非整个表单数据
  const name = watch('name');
  useEffect(() => {
    if (name !== UserInfos.name) {
      dispatch(fetchData({ name }));
    }
  }, [name, dispatch, UserInfos]);
  

效果验证 #

修改后：

• 首次渲染时表单会自动填充Redux初始值Lydia
• 初始状态下watch返回的数据与Redux一致，不会触发无效dispatch
• 只有用户手动修改表单内容时，才会触发dispatch更新Redux状态

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