React Hook Form中嵌套对象的表单校验错误提示如何处理？

问题根源 #

你嵌套字段的校验规则写法有误，导致错误信息无法正常生成和读取。

解决步骤 #

1. 修正校验规则的结构
   你当前把required设为布尔值，又单独写了message，这不符合React Hook Form的规则。正确的写法是将required配置为包含value和message的对象，和你第一个正常工作的示例保持一致：

   {...register("address.street_name", {
     required: {
       value: true,
       message: '* Address is required'
     }
   })}
   

   原来的写法中，message不属于required规则的一部分，所以校验触发时不会生成对应的错误提示文本。

2. 确认errors的正确获取
   必须从useForm的返回值中解构出formState里的errors：

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

   只有这样，errors.address?.street_name?.message才能正确访问到嵌套字段的错误信息。

3. 可选：简化错误信息的读取
   如果怕嵌套层级过深导致可选链冗余，可以用React Hook Form自带的get函数安全获取错误信息：

   import { get } from "react-hook-form";
   
   // 组件内使用
   <p className="text-error text-xs py-1 px-1">
     {get(errors, "address.street_name.message")}
   </p>
   

修正后的完整代码示例 #

<div className="form-control w-full max-w-xs">
  <label htmlFor="street_name" className="label">
    <span className="label-text font-semibold"> Address </span>
  </label>
  <textarea
    id="street_name"
    placeholder="Address"
    className="textarea some-class"
    {...register("address.street_name", {
      required: {
        value: true,
        message: '* Address is required'
      }
    })}
  ></textarea>
  <p className="text-error text-xs py-1 px-1">
    {errors.address?.street_name?.message}
  </p>
</div>

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