react-hook-form报Cannot read property 'name' of undefined解决

核心报错触发原因 #

Cannot read property 'name' of undefined 直接由 react-hook-form v7+ 版本API变更导致：

• v7之后，errors不再是useForm()的顶层返回属性，必须从formState中解构。你当前直接从useForm()解构errors，导致errors本身为undefined，访问errors.name时抛出错误。

其他需同步修复的错误 #

• register()调用格式错误：v7版本register第一个必填参数为表单字段名字符串，你当前所有调用都未传字段名，无法绑定表单字段。
• 校验规则拼写错误：将required误写为requried，导致必填校验完全不生效。
• 提交判断逻辑错误：onSubmit中if(data.name, data.email, data.password)是JS逗号表达式，仅会判断最后一个值data.password，无法校验三个字段是否都存在。
• 注册表单缺少email输入项：注册场景（returningUser为false时）的表单未添加email输入框，提交时data.email为undefined，无法正常调用注册方法。
• 组件命名不规范：SIgnUp大小写不符合React组件大驼峰命名要求，建议修正为SignUp。

修正后完整代码 #

import React, { useState } from 'react';
import { useAuth } from './useAuth'
import { useForm } from 'react-hook-form';
import logo from '../../Images/logo2.png';
import './SignUp.css'

// 修正组件名为大驼峰规范
const SignUp = () => {
    const [returningUser, setReturningUser] = useState(false);
    // 从formState中解构errors，适配v7+ API
    const { register, handleSubmit, formState: { errors } } = useForm();
    const auth = useAuth();

    const onSubmit = data => {
        if(returningUser){
            if(data.email && data.password){
                auth.signIn(data.email, data.password)
            }
        } else {
            // 修正逗号表达式为逻辑与判断
            if(data.name && data.email && data.password){
                auth.signUp(data.name, data.email, data.password)
            }
        }
    }

    return (
        <div className="sign-up">
            <div className="container">
                <div className="logo-container ">
                    <img src={logo} alt="餐厅logo"/>
                </div>
                {
                    returningUser ? (
                        <form onSubmit={handleSubmit(onSubmit)} className="py-5">
                            {auth.user != null && <p className="text-danger">{auth.user.error}</p>}
                            <div className="form-group">
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    // 补全字段名，修正required拼写
                                    {...register('email', { required: true })} 
                                    placeholder="Email"
                                />
                                {errors.email && <span className="error">Email is Required</span>}
                            </div>
                            <div className="form-group">
                                <input 
                                    type="password" 
                                    className="form-control" 
                                    {...register('password', { required: true })} 
                                    placeholder="password"
                                />
                                {errors.password && <span className="error">Password is Required</span>}
                            </div>
                            <div className="form-group">
                                <button className="btn btn-danger">Sign In</button>
                            </div>
                            <div className="option text-center">
                                <label onClick={() => setReturningUser(false)}>Create a new Account</label>
                            </div>
                        </form>
                    ) : (
                        <form onSubmit={handleSubmit(onSubmit)}>
                            <div className="form-group">
                                <input 
                                    type="text" 
                                    className="form-control" 
                                    {...register('name', { required: true })} 
                                    placeholder="Name"
                                />
                                {errors.name && <span className="error">Name is Required</span>}
                            </div>
                            {/* 补全缺失的email输入框 */}
                            <div className="form-group">
                                <input 
                                    type="email" 
                                    className="form-control" 
                                    {...register('email', { required: true })} 
                                    placeholder="Email"
                                />
                                {errors.email && <span className="error">Email is Required</span>}
                            </div>
                            <div className="form-group">
                                <input 
                                    type="password" 
                                    className="form-control" 
                                    {...register('password', { required: true })} 
                                    placeholder="Confirm password"
                                />
                                {errors.password && <span className="error">Password is Required</span>}
                            </div>
                            <div className="form-group">
                                <button className="btn btn-danger">Sign Up</button>
                            </div>
                            <div className="option text-center">
                                <label onClick={() => setReturningUser(true)}>Already have an account!</label>
                            </div>
                        </form>
                    )
                }
            </div>
        </div>
    );
};

export default SignUp;

注：如果使用的是 react-hook-form v6 及更低版本，errors确实在顶层返回值中，此时核心问题为register()未传字段名、拼写错误，对应调整register调用格式即可。

内容的提问来源于stack exchange，提问作者Majadul Haque