React Hook Form问题：首次提交时formState.errors对象为空

问题场景与代码 #

在React-TypeScript项目中使用react-hook-form时遇到以下问题，代码示例：

import { useForm } from "react-hook-form"

type FormData = {
  name: string
  mobile: string
}

export default function Form() {
  const { register, handleSubmit, formState } = useForm<FormData>({
    defaultValues: {
      name: "",
      mobile: "",
    },
  })

  const { errors } = formState

  const onSubmit = (data: FormData) => {
    console.log(data)
  }

  const onError = (err: any) => {
    console.log(err, errors)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input
        type="text"
        placeholder="Name"
        {...register("name", { required: true })}
      />
      <input
        type="text"
        placeholder="Mobile"
        {...register("mobile", { required: true })}
      />
      <input type="submit" value="Submit" />
    </form>
  )
}

问题现象 #

首次提交未通过验证的表单时，formState.errors对象为空，但handleSubmit的第二个回调onError能正确返回验证错误对象。

原因分析 #

这是react-hook-form的异步更新机制导致的：

• onError回调在验证失败后同步触发，此时组件尚未完成重新渲染，formState.errors还没来得及更新为最新的错误状态。
• formState.errors的更新是异步的，会触发组件重新渲染，重新渲染后才能拿到最新的错误值。

解决方案 #

方案1：直接使用onError回调中的错误对象 #

如果需要在验证失败后执行打印错误、上报等逻辑，直接使用onError参数里的错误对象即可，它是实时的验证结果：

const onError = (err: Record<keyof FormData, any>) => {
  console.log("最新错误信息:", err);
  // 这里可直接用err做后续处理
};

方案2：依赖formState.errors做UI渲染 #

如果要在页面上显示错误提示，无需在onError里处理，react-hook-form会自动更新formState.errors，组件重新渲染后就能读取到最新值，直接在JSX中使用即可：

// 修改后的组件返回部分
return (
  <form onSubmit={handleSubmit(onSubmit, onError)}>
    <input
      type="text"
      placeholder="Name"
      {...register("name", { required: "姓名不能为空" })}
    />
    {errors.name && <span style={{ color: 'red' }}>{errors.name.message}</span>}
    
    <input
      type="text"
      placeholder="Mobile"
      {...register("mobile", { required: "手机号不能为空" })}
    />
    {errors.mobile && <span style={{ color: 'red' }}>{errors.mobile.message}</span>}
    
    <input type="submit" value="Submit" />
  </form>
);

首次提交后，组件会重新渲染，errors会更新为最新状态，错误提示会正常显示。

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