如何解决是的验证导致错误
我正在尝试使用 yup 和 useForm 在 React 上验证我的表单,我已按照教程的每个步骤进行操作,但仍然收到错误消息。我收到'TypeError:无法读取未定义的属性'firstName'。这很奇怪,因为我已经在输入值中命名了它。我该如何解决这个问题?
P.s 我试过使用 {...register} 和 ref={register} 似乎无关紧要。
import React from 'react'
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object().shape({
firstName: yup.string().required("First Name should be required please"),lastName: yup.string().required(),email: yup.string().email().required(),});
const Submission = () => {
const { register,handleSubmit,errors } = useForm({
resolver: yupResolver(schema),});
const submitForm = (data) => {
console.log(data);
};
return (
<div className="Form">
<div className="title">Sign Up</div>
<div className="inputs">
<form onSubmit={handleSubmit(submitForm)}>
<input
type="text"
name="firstName"
{...register('firstName')}
placeholder="First Name..."
/>
<p> {errors.firstName?.message} </p>
<input
type="text"
name="lastName"
placeholder="Last Name..."
ref={register}
/>
<p> {errors.lastName?.message} </p>
<input
type="text"
name="email"
placeholder="Email..."
ref={register}
/>
<p> {errors.email?.message} </p>
<input type="submit" id="submit" />
</form>
</div>
</div>
);
}
export default Submission;
我收到的确切错误如下所示:
解决方法
事实证明我仍在使用该库的过时版本。 由此,
<input type="text"name="email"placeholder="Email..."ref={register}/>
const { register,handleSubmit,errors } = useForm({
resolver: yupResolver(schema),});
为此
{...register("email",{ required: "Email is Required"})};
const { register,formState: { errors },} = useForm();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。