react-hook-form V7 useForm钩子报错：无法读取undefined的sender属性求助

你遇到的这个错误核心原因是React Hook Form V7 对errors对象的获取方式做了变更，你的代码里还在沿用V6的写法，导致errors变量是undefined，访问errors.sender自然就会抛出"Cannot read properties of undefined"的错误。

具体修复步骤： #

1. 修正errors的解构方式
   在V7中，errors不再是useForm()返回的直接属性，必须从formState对象中解构出来。把原来的解构代码：

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

   改成：

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

2. （可选）移除冗余的name属性
   你的subject字段里手动写了name="subject"，但register('subject')会自动给input设置对应的name属性，重复设置没有必要，可以移除，让代码更简洁：

   <input
     type="text"
     placeholder="Subject"
     {...register('subject', { required: true })}
   />
   

修改后的完整组件代码： #

import React from 'react';
import '../css/SendMail.css';
import CloseIcon from '@mui/icons-material/Close';
import { Button } from '@mui/material';
import { useForm } from 'react-hook-form';

function SendMail() {
  // 修正errors的解构方式
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = (formData) => {
    console.log(formData);
  };
  console.log('Registered Fields:', watch());
  return (
    <div className="sendMail">
      <div className="sendMail__header">
        <h3>New Message</h3>
        <CloseIcon className="sendMail__close" />
      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register('sender', { required: true })}
          type="text"
          placeholder="To"
        />
        {errors.sender && <p>Sender email is required</p>}

        <input
          type="text"
          placeholder="Subject"
          {...register('subject', { required: true })}
        />

        <input
          type="text"
          placeholder="Message..."
          className="sendMail__message"
          {...register('message', { required: true })}
        />
        <div className="sendMail__options">
          <Button
            variant="contained"
            color="primary"
            className="sendMail__send"
            type="submit"
          >
            Send
          </Button>
        </div>
      </form>
    </div>
  );
}

export default SendMail;

额外验证点： #

• 确认你的react-hook-form版本确实是V7，可以在package.json里查看版本号，确保没有混用V6和V7的API。
• 提交表单时，检查控制台输出的formData是否包含sender、subject、message字段，验证注册是否生效。

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