React Hook Form 中 useFieldArray 的 ID 字段冲突问题解析

问题背景

在使用 React Hook Form 的 useFieldArray 功能时，开发者经常会遇到一个常见问题：表单数组中的每个字段对象会自动添加一个 id 属性，这个内置属性可能与开发者自定义的 id 字段产生冲突。

问题表现

当开发者定义的表单数据结构本身包含 id 字段时（例如用于数据库主键或其他业务逻辑），useFieldArray 自动注入的 id 属性会覆盖开发者定义的 id 值。这在以下场景中尤为明显：

1. 表单数据需要与后端数据库交互
2. 使用 Prisma 等 ORM 工具时
3. 表单数据中包含业务实体 ID

解决方案

React Hook Form 提供了 keyName 参数来解决这个问题。开发者可以通过这个参数指定一个替代属性名来存储数组项的标识符。

const phonesArray = useFieldArray({
  control: form.control,
  name: "phones",
  keyName: "$key"  // 使用自定义属性名替代默认的id
});

推荐的替代属性名包括：

• $key
• _id
• arrayId
• $id

技术实现原理

useFieldArray 需要为数组中的每个项维护一个唯一标识符，用于：

1. 跟踪数组项的变化
2. 优化渲染性能
3. 确保正确的数组操作（添加、删除、移动）

默认使用 id 属性是为了向后兼容和直观性，但这确实可能与业务数据产生冲突。

最佳实践建议

1. 明确区分技术标识符和业务标识符：使用 $key 等技术前缀可以清晰区分框架使用的标识符和业务数据

2. 保持一致性：在整个项目中统一使用相同的替代属性名

3. 类型安全：在使用 TypeScript 时，确保类型定义反映了这种区分

4. 未来兼容性：注意 React Hook Form 文档中提到 keyName 参数将在未来版本中移除，建议关注框架更新

总结

处理表单数组时的 ID 冲突是常见问题，React Hook Form 提供了灵活的解决方案。通过理解框架的内部机制和合理使用配置选项，开发者可以避免这类问题，同时保持代码的清晰性和可维护性。随着框架的发展，这类问题可能会得到更优雅的解决方案，但当前的方法已经能够很好地解决问题。