问题

I'm using the useForm hook from the react-hook-form (V7) library in my React component. However, I'm encountering the error "Cannot read properties of undefined (reading 'sender')" when attempting to access the lastName field. I've tried the following solutions based on suggestions received:

使用React组件中的react-hook-form（V7）库的useForm钩子。但是，当尝试访问lastName字段时，我遇到了错误“无法读取未定义的属性（读取'sender'）”。我尝试了根据收到的建议尝试以下解决方案：

Checked if the react-hook-form package is installed and imported correctly.
检查react-hook-form包是否已安装并正确导入。
Verified that the register function is properly registering the lastName field.
验证register函数是否正确注册了lastName字段。
Ensured that the input field associated with lastName has the correct name attribute.
确保与lastName相关联的输入字段具有正确的name属性。
Confirmed the dependencies (react, react-dom, react-hook-form) are installed and up to date.
确认依赖项（react、react-dom、react-hook-form）已安装并更新到最新版本。
Checked for conflicting dependencies and cleared cache when using a code bundler.
在使用代码捆绑器时检查是否存在冲突的依赖关系，并清除缓存。
Despite trying these solutions, the error persists. Could someone please help me identify the cause of the error and provide guidance on resolving it? Any insights or suggestions would be greatly appreciated.

尽管尝试了这些解决方案，错误仍然存在。是否有人可以帮助我确定错误的原因并提供解决方案的指导？任何见解或建议都将不胜感激。

The components code:

组件代码：

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() {
  const { register, handleSubmit, watch, 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
          name="subject"
          type="text"
          placeholder="Subject"
          {...register('subject', { required: true })}
        />

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

export default SendMail;

Despite attempting to rewrite the code from scratch, I encountered the same error when using the useForm hook from the react-hook-form library. I consulted ChatGPT, which suggested that the code should be functioning correctly. Additionally, I thoroughly reviewed the available documentation for the library, but found no relevant information to address the error.

尽管尝试了从头开始重写代码，但在使用react-hook-form库的useForm钩子时仍然遇到了相同的错误。我咨询了ChatGPT，ChatGPT建议代码应该正常运行。此外，我还彻底审查了该库的可用文档，但未找到解决错误的相关信息。

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() {
const { register, handleSubmit, watch, 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
name="subject"
type="text"
placeholder="Subject"
{...register('subject', { required: true })}
/>
{/* {errors.subject && <p>Subject is required</p>} */}
<input
type="text"
placeholder="Message..."
className="sendMail__message"
{...register('message', { required: true })}
/>
{/* {errors.message && <p> message is required</p>} */}
<div className="sendMail__options">
<Button
variant="contained"
color="primary"
className="sendMail__send"
type="submit"
>
Send
</Button>
</div>
</form>
</div>
);
}
export default SendMail;

答案1

得分: 0

将"useForm"钩子更改为以下方式：

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

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