react-hook-form报错UseFormReturn类型上不存在errors属性该如何处理？

你遇到的是react-hook-form版本迭代带来的破坏性变更问题：v7及以上版本的react-hook-form已经将原顶层返回的errors对象统一收归到formState属性下管理，不再支持直接从useForm的返回值中顶层解构errors。

方案1：适配v7版本的写法（推荐） #

直接从formState中解构出errors即可，修改后的代码如下：

const { register, handleSubmit, reset, setValue, getValues, formState: { errors } } = useForm({
    resolver: yupResolver(validationSchema)
});

注意：如果需要errors支持响应式更新，确保你在代码中正确引用了formState或者从formState中解构出了errors，否则可能出现校验后errors不更新的问题。

方案2：降级到v6版本 #

如果不想修改现有业务代码，可以将react-hook-form回退到v6版本，安装命令如下：
npm install react-hook-form@6.x

如果修改写法后仍然无法拿到errors，可以检查以下配置：

• yupResolver是否正确从@hookform/resolvers/yup中引入
• validationSchema的校验规则是否符合yup的语法要求
• 表单提交是否触发了handleSubmit的回调逻辑

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