TanStack Form 数组字段默认值与动态添加问题解析

问题现象

在使用 TanStack Form 处理包含数组字段的表单时，开发者可能会遇到一个特殊现象：通过 defaultValues 设置的初始数组项会保留所有字段属性，而通过 pushValue 动态添加的数组项却只包含被用户实际填写过的字段。这种不一致行为会导致表单数据处理时出现预期外的差异。

问题复现场景

假设我们正在开发一个学生信息录入系统，表单需要支持动态添加多个学生信息。开发者通常会这样设计：

1. 设置一个默认学生对象作为模板
2. 在表单初始化时提供一个默认空行
3. 提供"添加更多"按钮来动态增加行

技术背景

这个问题本质上与 React 的 StrictMode 和表单字段的生命周期管理有关。在 StrictMode 下，React 会故意双重挂载组件以检测潜在问题，这会影响表单字段的初始化和值保持。

解决方案演进

临时解决方案

在 TanStack Form 0.23.3 版本中，可以通过以下方式解决：

1. 临时禁用 StrictMode（不推荐作为长期方案）
2. 为每个动态字段添加 preserveValue 属性

<form.Field name={`students[${i}].firstName`} preserveValue>
  {/* 字段渲染逻辑 */}
</form.Field>

官方修复

在 TanStack Form 0.24 版本中，开发团队做出了架构调整：

1. 将 preserveValue 的默认值改为 true
2. 移除了该配置选项，简化了API
3. 从根本上解决了数组字段值保持的问题

最佳实践建议

1. 对于新项目，直接使用 0.24 或更高版本
2. 对于现有项目升级时，注意检查数组字段的行为变化
3. 设计动态表单时，考虑使用统一的对象模板来初始化新项
4. 处理表单提交时，做好数据校验和默认值处理

技术原理深入

这个问题的本质在于表单字段的"受控"与"非受控"状态管理。当字段未被用户交互时，其值可能不会被正式注册到表单状态中。preserveValue 的作用就是强制保留这些初始值，确保数据结构的一致性。

在后续版本中，TanStack Form 团队优化了内部状态管理机制，使得数组操作更加可靠，减少了开发者需要关注的底层细节。