TanStack Form 数组字段中数字类型值消失问题解析

问题现象

在使用 TanStack Form 处理数组表单时，开发者反馈了一个奇怪的现象：当表单中包含数字类型的字段（如年龄）时，每次添加新的数组项后，之前输入的数字值会神秘消失，而文本类型的字段（如姓名）则能正常保留。

问题复现

该问题在以下场景中稳定复现：

1. 创建一个包含数组字段的表单
2. 数组项中包含数字类型字段（如年龄）和文本类型字段（如姓名）
3. 用户输入一些值后，点击"添加新项"按钮
4. 观察发现之前输入的数字值消失，而文本值保留

技术分析

经过 TanStack 团队的分析，这个问题源于表单库在处理数组字段时对数字类型值的特殊处理。在底层实现中，当新增数组项时，表单的重新渲染逻辑没有正确保留数字类型的输入值。

解决方案

TanStack 团队在版本 0.24 中修复了这个问题。修复方案主要涉及：

1. 改进了数组字段的值追踪机制
2. 确保数字类型值与文本类型值获得同等的处理
3. 优化了表单重新渲染时的状态保持逻辑

升级建议

遇到此问题的开发者应该：

1. 将 @tanstack/react-form 升级到 0.24 或更高版本
2. 检查项目中所有使用数组表单的地方
3. 特别关注包含数字输入字段的数组表单

最佳实践

为了避免类似问题，建议开发者在处理表单数组时：

1. 为每个数组项提供稳定的 key
2. 复杂表单考虑使用受控组件
3. 对重要表单数据进行本地缓存
4. 定期更新表单库到最新稳定版

这个问题的修复体现了 TanStack Form 团队对细节的关注，也提醒我们在处理表单状态时要特别注意不同类型数据的特殊性。