是的验证导致错误

问题描述

我正在尝试使用 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();