类型错误：无法读取未定义的属性“电子邮件”-React.js

Question

我试图使用下面的表格，但是当我按下注册按钮时，如果没有错误，它应该被提交并显示 <SignUpFormSuccess />，但是突然当我按下它，我的浏览器说：TypeError：无法读取未定义的属性“电子邮件” SignUpUser src/components/SignUp/SignUpUser.js:23。有谁知道为什么？

我的 validateInfo.js 文件

export default function validateInfo(values) {
    let errors = {};
    //email

    if (!values.email) {
        errors.email = 'Email required';
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
        errors.email = 'Email address is invalid';
    }

    if (!values.companyName.trim()) {
        errors.companyName = "Company Name required"
    }else if (!/^[A-Za-z]+/.test(values.companyName.trim())) {
        errors.companyName = 'Enter a valid company name';
    }

    //username
    if (!values.username.trim()) {
        errors.username = "Username required"
    }else if (!/^[A-Za-z]+/.test(values.username.trim())) {
        errors.username = 'Enter a valid username';
    }

    //fullname

    if (!values.fullname.trim()) {
        errors.fullname = 'Full Name required';
    }
    else if (!/^[A-Za-z]+/.test(values.fullname.trim())) {
        errors.fullname = 'Enter a valid Full Name';
    }



    //password

    if (!values.password) {
        errors.password = 'Password is required';
    } else if (values.password.length < 6) {
        errors.password = 'Password needs to be 6 characters or more';
    }

    return errors;
}

我的 useForm.js 文件是这样的：

import { useState, useEffect } from 'react';

const useForm = (callback, validate) => {
  const [values, setValues] = useState({
    username: '',
    email: '',
    fullname:'',
    password: '',
    businessEmail: '',
    companyName:''
    
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = e => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
  };

  const handleSubmit = e => {
    e.preventDefault();

    setErrors(validate(values));
    setIsSubmitting(true);
  };

  useEffect(
    () => {
      if (Object.keys(errors).length === 0 && isSubmitting) {
        callback();
      }
    },
    [callback, errors, isSubmitting]
  );

  return { handleChange, handleSubmit, values, errors };
};

export default useForm;

SignUpUser.js 看起来像这样：

import React from 'react';
import useForm from '../useForm';
import validate from '../validateInfo';
import './SignUpForm.css'


const SignUpUser = ({submitForm}) => {

    const { handleChange, values, handleSubmit, errors } = useForm(submitForm,validate);

    return (

        <div className="form-content-right">
            


            <form className="form" onSubmit={handleSubmit}>
                <h1>Join our community by setting up your account</h1>

                <div className="form-inputs">
                    <label className='form-label'>
                    </label>
                    <input
                        type="email"
                        name="email"
                        className='form-input'
                        placeholder="Email"
                        value={values.email}
                        onChange={handleChange}
                    />


                    {errors.email && <p>{errors.email}</p>}

                </div>

                <div className="form-inputs">
                    <label htmlFor="fullname" className='form-label'> </label>
                    <input
                        type="text"
                        name="fullname"
                        className='form-input'
                        placeholder="Full Name"
                        value={values.fullname}
                        onChange={handleChange}
                    />
                    {errors.fullname && <p>{errors.fullname}</p>}

                </div>

                <div className="form-inputs">
                    <label htmlFor="username" className='form-label'></label>
                    <input
                        type="text"
                        name="username"
                        className='form-input'
                        placeholder="Username"
                        value={values.username}
                        onChange={handleChange}
                    />


                    {errors.username && <p>{errors.username}</p>}
                </div>


                <div className="form-inputs">
                    <label htmlFor="password" className='form-label'> </label>
                    <input
                        type="text"
                        name="password"
                        className='form-input'
                        placeholder="Password"
                        value={values.password}
                        onChange={handleChange}
                    />

                    {errors.password && <p>{errors.password}</p>}
                </div>
                <button className="form-input-btn" type='submit'>Sign Up</button>
                <span className="form-input-login"> Already have an account?  <a href="/log-in">Login</a> </span>


            </form>


        </div>

    );
};

export default SignUpUser;

我的 SignUpFormUser.js 文件

import React, { useState } from 'react';
import SignUpUser from './SignUpUser';
import SignUpFormSuccess from './SignUpFormSuccess';
import { Link } from 'react-router-dom';


const SignUpForm = () => {
    const [isSubmitted, setIsSubmitted] = useState(false);

    function submitForm() {
        setIsSubmitted(true);
    }
    return (
        <>
            <div className="grid-container top">

                <div className="grid-item back"> 
                <Link to='/sign-up'>
                        <img src="/images/backOutline.svg" alt="" />
                    </Link>
                </div>

                <div className="grid-item logo">

                    <Link to='/' className='logo'>
                        <img src="/images/yokifyLogoBlk.svg" alt="" />
                    </Link>

                </div>

                <div className="grid-item cancel">

                    <Link to='/'>
                        <img src="/images/cancelOutline.svg" alt="" />
                    </Link>

                </div>
                </div>


                <div className='form-container'>
                    <div className="form-content-left">
                        <img src="/images/handsUp.svg" alt="people" className="form-img"/>
                    </div>

                    {!isSubmitted ? (
                        <SignUpUser submitForm={submitForm} />
                    ) : (
                            <SignUpFormSuccess />
                        )}



                
                </div>
        </>
    );
};

export default SignUpForm;


  [1] https://i.stack.imgur.com/2nsgR.png