React Hook Form - 未定义 formState

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>

还有 errors 这里的 useForm 没有正确实现，setError 没有设置“error”对象和发生的错误，这里出了什么问题？

Answer 1

因为你将 formState 解构为错误 {formState:{errors}} 只会出现 return 错误，你可以使用没有错误的 formState 的 rest 属性，比如 {formState:{errors, ...formState}} 或类似的东西，或者只是简单地使用 formState.errors

Answer 2

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

阅读此处：

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

React Hook Form - 未定义 formState

React Hook Form - formState is not defined

reactjs

react-hooks

react-hook-form