集成redux-persist后react-hook-form的onSubmit失效问题排查

核心问题分析 #

1. defaultValues类型不匹配：react-hook-form要求defaultValues传入对象格式，但你直接传递了字符串类型的programName，导致表单初始化逻辑异常，校验规则失效。
2. Redux状态更新错误：提交时用Object.values(data)将表单数据转为数组，赋值给state.programName后，Redux中该字段变成数组类型，后续表单取值时类型不匹配，触发必填校验错误。
3. 持久化恢复的潜在延迟：redux-persist恢复状态时可能存在短暂延迟，若表单初始化早于状态恢复，会导致默认值加载失败。

分步修复 #

1. 修正表单defaultValues格式 #

在ProgramName.js中，将defaultValues改为对应表单字段的对象：

function ProgramName() {
  // 从Redux取字符串类型的programName值
  const programNameValue = useSelector((state) => state.programName);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    // 改为对象格式，匹配表单字段名
    defaultValues: { programName: programNameValue },
  });

  // ...其他代码
}

2. 修复Redux状态更新逻辑 #

在handleOnSubmit中，直接传递表单字段的原始值，而非数组：

const handleOnSubmit = (data) => {
  console.log(data.programName);
  // 直接传入字符串类型的表单值
  dispatch(submitStep1(data.programName));
  history.push('./step2');
};

3. 同步Redux状态与表单（可选，解决刷新延迟） #

添加useEffect监听Redux状态变化，确保持久化恢复后表单能同步最新值：

import { useForm, setValue } from 'react-hook-form';

function ProgramName() {
  const programNameValue = useSelector((state) => state.programName);
  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
  } = useForm({
    defaultValues: { programName: programNameValue },
  });

  // 监听Redux状态，同步到表单
  useEffect(() => {
    setValue('programName', programNameValue);
  }, [programNameValue, setValue]);

  // ...其他代码
}

4. 确认Redux Slice类型一致性 #

确保formSlice.js中submitStep1的赋值逻辑正确，保持字段类型为字符串：

reducers: {
  submitStep1: (state, action) => {
    // 确保payload是字符串类型，与initialState一致
    state.programName = action.payload;
  },
  // ...其他reducer逻辑
}

验证效果 #

修复后执行以下操作验证：

• 填写输入框并提交，控制台会打印正确的字符串值
• Redux DevTools中programName字段为字符串类型
• 表单校验通过，成功跳转到step2
• 刷新页面后，表单自动填充之前输入的值

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