React Hook Form中如何访问动态生成的属性错误？

你遇到的问题可以通过两种方式解决，核心是规避动态字段名的语法歧义，确保正确定位errors对象中的对应键：

方式一：提前定义字段名变量（推荐） #

把动态生成的字段名先存入变量，避免在JSX中嵌套模板字符串导致的语法混淆，同时让代码更清晰：

// 先生成并存储字段名
const fieldName = `M1.${index}.M13-M14`;

<TextField
  {...register(fieldName, { required: true })}
  fullWidth
  // 用变量访问errors对象，搭配可选链避免空值报错
  error={errors?.[fieldName]?.type === 'required'}
/>

方式二：使用数组形式的字段路径注册 #

React Hook Form支持用数组作为字段路径，这种方式会自动将字段解析为嵌套结构，你可以通过嵌套访问的方式获取错误：

<TextField
  // 用数组传递字段路径，自动处理动态索引和特殊字符
  {...register(['M1', index, 'M13-M14'], { required: true })}
  fullWidth
  // 通过嵌套可选链访问嵌套的errors结构
  error={errors?.M1?.[index]?.['M13-M14']?.type === 'required'}
/>

注意点 #

• 第一种方式中，确保index是有效的数值，生成的字段名格式正确（比如M1.0.M13-M14），errors对象的键会和注册的字符串完全一致。
• 第二种方式更适合复杂的嵌套字段场景，数组中的每个元素对应嵌套对象的层级，带特殊字符的字段名（比如M13-M14）需要用方括号访问。

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