ant-design-mobile中Form.Array组件删除项时onValuesChange回调问题解析

问题现象

在使用ant-design-mobile的Form.Array组件时，开发者发现了一个与表单值更新相关的问题。具体表现为：当用户添加表单项使数组长度变为2后，再删除其中一个表单项时，onValuesChange回调函数中获取到的allValues参数并不是最新的值，而是删除前的旧值。

问题本质

这个问题本质上是一个表单状态同步问题。在React的表单组件中，当用户操作导致表单结构变化时，组件的内部状态应该立即反映这种变化，并将最新的值传递给回调函数。然而在这个案例中，Form.Array组件在删除项时，回调函数接收到的值没有及时更新。

技术背景

ant-design-mobile的Form组件是基于rc-field-form实现的，它提供了强大的表单管理能力。Form.Array是专门用于处理动态数组类型表单数据的组件，它允许用户动态添加、删除和排序表单项。

在React中，表单状态管理需要考虑以下几个关键点：

1. 表单值的存储位置（受控/非受控）
2. 状态更新的时机
3. 回调函数的触发顺序
4. 性能优化（避免不必要的渲染）

解决方案

ant-design-mobile团队已经确认这是一个已知问题，并在内部编号为#6690的修复中解决了这个问题。修复的核心思路是确保在删除表单项操作完成后，立即更新表单状态并触发回调函数，保证回调函数中接收到的值始终是最新的。

最佳实践

对于遇到类似问题的开发者，建议：

1. 及时更新到修复后的版本
2. 在回调函数中处理表单值时，始终考虑可能存在异步延迟的情况
3. 对于关键操作，可以通过表单实例的getFieldsValue方法主动获取最新值
4. 在复杂表单场景下，考虑使用useEffect监听特定字段的变化

总结

表单状态管理是前端开发中的常见挑战，特别是在处理动态表单时。ant-design-mobile团队持续优化Form组件的稳定性和可靠性，这个问题的修复体现了他们对用户体验的重视。开发者在使用动态表单功能时，应当关注版本更新，以获得最佳的使用体验。