React Hook Form 已输入内容仍触发必填字段错误如何解决

• 核心为混用了React Hook Form不同版本的API：
  • v6及更早版本中，register方法直接返回ref函数，可使用ref={register()}的写法绑定表单字段
  • v7及之后版本对registerAPI做了破坏性更新，调用后返回的是包含name、ref、onChange、onBlur四个属性的对象，必须全量展开绑定到input组件上才能正常监听输入、收集字段值。你现在只绑定了ref，表单无法捕获输入的内容，所以就算填了内容也会判定为空，触发必填校验报错
• 最开始你写<input {...register('name', { required: true })} />报语法错误，大概率是项目的编译配置不支持JSX内的对象展开语法，或者代码存在标签未闭合、上下文错误等语法问题。

1. 优先排查项目JSX语法支持能力，确保babel已经配置了@babel/plugin-proposal-object-rest-spread插件，当前主流脚手架如Create React App、Vite默认都已支持该语法
2. 将所有表单输入项的绑定方式从ref={register()}改为全量展开register返回值，修正后的代码如下：

import React from 'react'
import { useForm } from 'react-hook-form'

const NewUserForm = () => {
    const { register, handleSubmit, formState: { errors } } = useForm();
    const onSubmit = data => console.log(data)

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" placeholder="Name" {...register('name', {required: true})} />
        {errors.name && <span> This field is required</span>} 
        <input type="text" placeholder="Email" {...register('email', {required: true})} />
        {errors.email && <span> This field is required</span>} 
        <input type="submit" />            
      </form>
    )
}

export default NewUserForm

3. 如果你确实要沿用旧的ref={register()}写法，可以将React Hook Form降级到v6版本即可。

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