react-hook-form创建表单校验时出现reading 'name'的undefined类型错误

• 版本适配问题：你使用的是react-hook-form v7及以上版本，该版本调整了返回值结构，errors不再是useForm()的直接返回属性，而是封装在formState对象中。你直接从useForm()返回值解构errors会得到undefined，读取undefined.name就触发了本次类型错误。
• 依赖引入缺失：代码中使用了useState但没有对应引入，运行时也会触发报错。
• 表单绑定缺失：除name字段外，email、subject、description三个输入框都没有绑定register方法，后续提交时无法正常获取字段值，也无法触发对应校验规则。

1. 补充基础依赖引入 #

在代码顶部添加React和useState的引入：

import React, { useState } from 'react'

2. 调整useForm解构逻辑 #

将原有的解构代码：

const { register, handleSubmit, errors } = useForm();

替换为从formState中提取errors：

const { register, handleSubmit, formState: { errors } } = useForm();

3. 优化错误信息判空逻辑 #

将原有的错误展示写法：

<p> {errors.name && errors.name.message} </p>

替换为可选链写法，语法更简洁，同时避免层级读取的类型报错：

<p> {errors?.name?.message} </p>

4. 给其余表单字段补充register绑定 #

按name字段的逻辑，给email、subject、description字段补充绑定和对应校验规则即可，示例如下：

{/* Email Input */}
<input 
  type="email" 
  className="form-control" 
  placeholder="E-mail" 
  name="email"
  {...register("email", {
    required: "请输入邮箱地址",
    pattern: {
      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: "请输入合法的邮箱格式"
    }
  })}
/>
<span className="error-message">
  <p> {errors?.email?.message} </p>
</span>

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