TanStack Form 嵌套对象数组在严格模式下的值丢失问题解析

问题背景

在使用TanStack Form处理表单数据时，开发者可能会遇到一个特殊场景：当表单中包含嵌套对象的数组字段，并且应用处于React的严格模式(StrictMode)下时，使用pushValue方法添加新项会导致部分字段值丢失。

现象描述

具体表现为：当用户点击"添加人员"按钮三次后，预期应该生成三个结构完整的对象{name: "", age: 0}，但实际结果却是[{"age":0},{"age":0},{"name":"","age":0}]，即前两个对象缺少了name字段。

技术分析

这个问题实际上已经在TanStack Form的0.24.0版本中得到了修复，但由于构建发布过程中的意外情况，导致修复未能正确生效。具体原因如下：

1. 版本依赖问题：虽然react-form@0.24.0发布了，但它错误地依赖了旧版本的form-core@0.23.0，而没有使用包含修复的form-core@0.24.0。

2. CI/CD流程异常：发布过程中，GitHub Actions的自动构建流程出现了问题，虽然手动触发了发布，但由于临时分支保护设置，相关变更未能正确合并到主分支。

解决方案

开发团队在发现问题后迅速响应，发布了0.24.2版本，彻底解决了这个问题。这个版本确保了：

• 正确的依赖关系：react-form@0.24.2现在正确依赖form-core@0.24.0
• 完整的修复内容：包含了对嵌套对象数组在严格模式下值丢失问题的修复

最佳实践建议

对于开发者来说，遇到类似问题时可以采取以下措施：

1. 检查版本依赖：确保所有相关包版本一致且为最新
2. 验证严格模式影响：在开发过程中注意React严格模式可能带来的双重渲染影响
3. 关注更新日志：及时了解框架修复的问题和引入的新特性

总结

表单处理库在复杂场景下的表现往往需要开发者特别关注。TanStack Form团队通过快速响应和修复，展示了他们对开发者体验的重视。对于开发者而言，保持依赖更新和了解框架特性是避免类似问题的关键。