React中使用React Hook Form的表单验证问题

• 问题现象：进入更新视图后，表单字段已填充数据，但点击更新按钮仍触发必填项验证提示
• 复现步骤：列表页点击任意记录的更新按钮，进入更新页直接点击更新按钮即可触发
• 相关代码片段：

<input
  placeholder='First Name'
  required
  value={firstName}
  {...register("firstName", {
    onChange: (event) => setFirstName(event.target.value),
    required: "Required",
    pattern: {
      value: /^(?=.{1,40}$)[a-zA-Z]+(?:[-'\s][a-zA-Z]+)*$/,
      message: "invalid First Name",
    },
  })}
/>

• 推测原因：更新时重新验证所有字段，但表单初始值未同步到React Hook Form的内部状态

问题根源 #

你手动维护了firstName组件状态，还自行绑定了value和onChange，这会干扰React Hook Form的原生状态管理逻辑。更新页面加载数据后，你仅将数据存入自己维护的firstName，但React Hook Form内部状态仍为空，导致验证时判定字段未填写，触发必填提示。

解决方案 #

1. 移除手动维护的状态：删掉自己写的useState来存firstName，让React Hook Form完全接管表单状态
2. 正确设置表单初始值：更新页面初始化时，将从API获取的记录数据设为表单默认值
3. 删除冗余属性：去掉input上的required，因为已经在register配置中添加了必填规则

修改后的代码示例

如果初始化时已拿到数据：

// 初始化useForm时传入默认值
const { register, handleSubmit, formState: { errors } } = useForm({
  defaultValues: {
    firstName: userData.firstName // userData为从API获取的待更新记录
  }
});

// 简化后的input组件
<input
  placeholder='First Name'
  {...register("firstName", {
    required: "Required",
    pattern: {
      value: /^(?=.{1,40}$)[a-zA-Z]+(?:[-'\s][a-zA-Z]+)*$/,
      message: "invalid First Name",
    },
  })}
/>

如果是异步请求获取数据（组件渲染后才拿到），使用reset方法设置：

const { register, handleSubmit, reset, formState: { errors } } = useForm();

// 异步获取数据后重置表单
useEffect(() => {
  const getUserData = async () => {
    const res = await fetch(`/api/users/${userId}`);
    const userData = await res.json();
    reset(userData); // 将获取到的数据设为表单初始值
  };
  getUserData();
}, [userId, reset]);

关键提醒 #

React Hook Form的核心优势就是减少手动状态维护，不要将它与自定义useState混用，极易出现状态不同步问题。更新页面必须确保初始值正确同步到Form内部状态，这样验证才会基于真实字段值执行。

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