React Hook Form受控表单提交成功后reset()失效问题排查

核心问题 #

你的代码中reset()逻辑执行后表单状态已重置，但输入字段未更新，大概率是自定义组件FormRow未正确绑定React Hook Form的field属性，或者reset调用方式、useEffect依赖项存在问题。

具体修复步骤 #

1. 确保FormRow正确处理受控属性 #

Controller传递的field包含value和onChange，必须确保FormRow将这两个属性正确绑定到内部的input元素上。如果FormRow是自定义组件，检查其内部实现是否类似下面的结构：

// 示例FormRow正确实现
const FormRow = ({ label, type, className, error, value, onChange }) => {
  return (
    <div className={className}>
      <label>{label}</label>
      <input 
        type={type} 
        value={value}  // 必须绑定field.value
        onChange={(e) => onChange(e.target.value)}  // 必须触发field.onChange
      />
      {error && <span className="error">{error}</span>}
    </div>
  );
};

如果FormRow内部用自身的useState维护输入状态，会和React Hook Form的受控逻辑冲突，必须改为使用field传递的value和onChange。

2. 明确传入reset的重置值 #

不要空调用reset()，显式传入空白状态的值，确保强制覆盖表单状态：

useEffect(() => {
  if (isSubmitSuccessful) {
    console.log('clearing the form');
    dispatch(resetState());
    // 显式传入空白值
    reset({senderName: '', senderEmail: '', subject: '', message: ''});
  }

  console.log('clearing the alert');
  setTimeout(() => {
    dispatch(clearAlert());
  }, 3000);
}, [isSubmitSuccessful, reset, dispatch]);

3. 优化useEffect依赖项 #

移除formState作为依赖（它是引用类型，每次渲染会生成新对象，导致useEffect不必要触发），只保留必要的依赖项：isSubmitSuccessful、reset、dispatch，避免逻辑重复执行或异常。

4. 排除外部状态干扰 #

检查FormRow是否从Redux状态（如emailstate）中获取输入值，如果是，会覆盖Controller传递的field.value，导致reset后UI不更新。确保FormRow的输入值仅来自field属性。

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