React Hook Form useForm未返回formState错误及提交刷新问题

1. 页面提交刷新问题 #

你的onSubmit写法错误：使用void会立即执行handleSubmit，而非将事件处理函数绑定到表单的提交事件，导致表单触发默认刷新行为。

修复方法：移除void，直接传递handleSubmit返回的函数：

onSubmit={editForm.handleSubmit(
  () => console.log('success'), 
  (val) => console.log('Errors: ', val)
)}

2. formState.errors 始终为 undefined 的问题 #

你自定义了async resolver并重复调用zodResolver，这种冗余包装会导致验证结果没有正确传递给react-hook-form。zodResolver本身已经是符合react-hook-form要求的resolver，无需额外包装。

修复方法：直接将zodResolver(AccountSchema)作为resolver传入useForm：

const editForm = useForm<Account>({
  resolver: zodResolver(AccountSchema),
});

额外检查要点 #

• 确保在组件中正确解构formState.errors：

  const { register, handleSubmit, formState: { errors } } = editForm;
  

• 表单控件需通过register绑定到form，例如：

  <input {...register('title')} />
  {errors.title && <span>{errors.title.message}</span>}
  

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