react-hook-form 中的未定义错误对象

Question

我有这个问题

无法读取未定义的属性“标题”。

我已经按照文档中的示例代码进行操作，react-hook-form但我仍然遇到此问题。

const [taskInfo, setTaskInfo] = useState({
    title: '',
    description: '',
    created: currentUser.fullname,
    assigned: '',
    priority: '',
    dateDue: new Date(),
  });


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


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

<TextField
  fullWidth
  variant='outlined'
  label='Title'
  value={taskInfo.title}
  onChange={handleChange}
  onFocus={handleDisbleLabel}
  onBlur={handleEnableLabel}
  InputLabelProps={{ shrink: false }}
  {...register('title', { required: 'This is required' })}
/>
  {errors.title && 'Your input is required'}

Answer 1

如果您使用的是react-hook-formv7，则将errors对象移至formState现在，请将代码更改为：

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

代替

const { register, errors } = useForm();

参考：migrate-v6-to-v7。