使用React Hook Form动态字段访问errors遇TypeScript类型错误求助

1. 定义表单数据的TypeScript接口 #

先给表单数据明确类型约束，比如你的services是包含value字段的数组：

interface FormValues {
  services: Array<{
    value: string; // 根据实际字段类型调整，比如number、boolean等
    // 若有其他字段，也需在此定义
  }>;
}

2. 初始化useForm时指定类型 #

调用useForm时传入上述接口，让React Hook Form自动推断所有字段的类型：

const { control, errors, useFieldArray } = useForm<FormValues>({
  defaultValues: {
    services: [{ value: "" }] // 匹配接口类型的默认值
  }
});

3. 利用useFieldArray返回的字段名渲染组件 #

使用useFieldArray返回的fields数组，直接通过field.name拼接字段路径，无需as any绕过类型检查：

const { fields, append, remove } = useFieldArray({
  control,
  name: "services" // 对应FormValues中的services字段
});

// 渲染动态字段
{fields.map((field, index) => (
  <Controller
    key={field.id}
    control={control}
    name={`${field.name}.value`} // TypeScript可自动推断此路径的类型
    render={({ field: ctrlField }) => (
      <div>
        <input {...ctrlField} />
        {/* 正确访问错误信息，无类型报错 */}
        {errors?.services?.[index]?.value && (
          <span>{errors.services[index].value.message}</span>
        )}
        <button onClick={() => remove(index)}>删除</button>
      </div>
    )}
  />
))}

关键说明 #

去掉as any后，TypeScript能通过你定义的FormValues接口，自动识别services[${index}].value这个字段路径的类型，访问errors时就不会再出现类型错误。

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