React Hook Form 中使用 useFieldArray 时如何动态添加自定义错误提示

你之前写的errors.items.index.name无法生效，核心是把动态字段的错误路径当成了固定字符串属性拼接，没有匹配到React Hook Form生成的嵌套错误对象结构。
useFieldArray对应的表单值本质是数组结构，其生成的errors对象也完全对齐这个数组结构：当你给useFieldArray传入的name是items时，errors.items本身就是一个数组，数组每一项对应表单数组单行的所有字段错误。

• 渲染动态表单项时，结合循环索引动态取对应行的错误值，不要硬编码路径：

  // 从useFieldArray拿到fields列表后做循环渲染
  {fields.map((field, index) => (
    <div key={field.id}>
      {/* 注册字段时的路径要和取错误的路径严格对应 */}
      <input {...register(`items.${index}.name`)} />
      {/* 用可选链逐层取值，避免初始渲染时报undefined错误 */}
      {errors?.items?.[index]?.name && (
        <p>{errors.items[index].name.message || "这项名称不能为空"}</p>
      )}
    </div>
  ))}
  

• 常见踩坑提醒：
  • 不要在errors的属性里写字符串index，比如errors.items.index.name——这里的index是固定的对象属性名，根本不会对应你循环时的实际索引值（0、1、2...），自然取不到匹配的错误
  • 注册输入的字段路径、取错误的路径必须完全对齐：如果你注册时写的是items.${index}.nickname，取错误时就必须对应读errors.items[index].nickname，路径错了一样取不到值
  • 初始渲染时errors对象往往是空的，一定要加可选链判断，避免深层取值时报类型错误

如果需要手动给数组里的某一项加自定义错误，可以直接调用React Hook Form提供的setError方法，传入和注册时完全一致的动态路径即可：

// 给第3项（索引为2）的name字段设置自定义错误
setError(`items.${2}.name`, {
  type: "custom",
  message: "该名称已被占用"
})

设置完成后，同样可以通过errors?.items?.[2]?.name?.message取到这条自定义错误信息，和校验规则自动生成的错误渲染逻辑完全通用。

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