React Hook Form - formState is not defined

Question

我正试图在我的React应用程序中使用React Hook Forms，我正在使用版本7的React Hook form，我收到一个错误，上面写着">formState未定义"；尽管它是正确导入和使用的。这是我在应用程序中使用的一段代码，根据此处提供的文档显示：-https://react-hook-form.com/api/useform/formstate

const LoginForm = () => {
const { register, setError ,formState: { errors }, handleSubmit } = useForm();
const {sendSignInLinkToEmail} = useAuth();
const onSubmit = async data => {
// console.log(data);
try{
await sendSignInLinkToEmail(data.email);
}catch (error) {
setError("email", {
type: "manual",
message: error.message,
});
}
}
console.log(errors);
return(
<GridItem>

{ errors.email && (
<Alert status="error" variant="subtle" mt={6} mb={6}>
<AlertIcon />
{errors.email.message}
</Alert>
)}
{formState.isSubmitSuccessful && (
<Alert status="success" variant="subtle" mt={6} mb={6}>
<AlertIcon />
Check your email to complete login !!
</Alert>
)}
<form onSubmit={handleSubmit(onSubmit)}>
<FormControl>
<FormLabel htmlFor="email">Email</FormLabel>
<Input name="email" placeholder="Email" {...register('email')}></Input>
<Button mt={4} colorScheme="teal" isLoading={formState.isSubmitting} type="submit">Login</Button>
</FormControl>
</form>
</GridItem>
)
}

但是我收到这个错误

Line 50:14:  'formState' is not defined  no-undef
Line 60:66:  'formState' is not defined  no-undef

线50是

{formState.isSubmitSuccessful && (
<Alert status="success" variant="subtle" mt={6} mb={6}>
<AlertIcon />
Check your email to complete login !!
</Alert>
)}

线60是

<Button mt={4} colorScheme="teal" isLoading={formState.isSubmitting} type="submit">Login</Button>

此外，useForm中的错误没有正确实现，setError没有设置"；错误"；对象出现错误，这里出了什么问题？

Answer 1

由于您将formState销毁为错误{formState:{errors}}只会返回错误，因此您可以在没有{formState:{errors, ...formState}}或类似错误的情况下使用formState的其余道具，或者只使用formState.errors

Answer 2

您还应该使用register来正确应用验证。

阅读此处：

https://react-hook-form.com/api/useform/register/