Semi-Design中ArrayField默认值引用问题解析

问题背景

在Semi-Design表单组件的使用过程中，开发者发现当使用ArrayField的addWithInitValue方法添加带有对象类型默认值的表单项时，表单的修改会意外影响到原始默认值对象。这导致了一个严重的数据污染问题——所有使用相同默认值的表单项会相互影响，因为它们共享了同一个对象引用。

问题本质

这个问题的核心在于JavaScript的对象引用机制。当我们将一个对象作为默认值传递给表单组件时，如果组件内部没有对该对象进行深拷贝，那么所有使用该默认值的表单项实际上都是在操作同一个内存地址的对象。

具体表现为：

1. 修改任意一个表单项的值
2. 其他表单项的值也会随之改变
3. 原始默认值对象也被修改

技术分析

在React应用中，状态应该是不可变的。当我们修改状态时，应该创建新的对象而不是直接修改现有对象。Semi-Design的ArrayField组件在处理默认值时，直接使用了传入的对象引用，而没有进行适当的拷贝操作，这违反了React的状态管理原则。

解决方案

Semi-Design团队在v2.63.0-beta.0版本中修复了这个问题。修复方案主要是在addWithInitValue方法内部对传入的默认值进行了深拷贝，确保：

1. 每个表单项获得独立的默认值副本
2. 表单修改不会影响原始默认值对象
3. 不同表单项之间不会相互干扰

最佳实践

为了避免类似问题，开发者在使用表单组件时应该注意：

1. 对于对象类型的默认值，考虑在传入前自行进行深拷贝
2. 使用不可变数据的方式管理表单状态
3. 对于复杂嵌套结构，考虑使用专门的表单状态管理库
4. 在组件设计时，应该对传入的props进行适当的保护性拷贝

总结

这个问题的修复体现了前端开发中"不可变数据"原则的重要性。Semi-Design团队及时响应并修复了这个问题，使得ArrayField组件在处理复杂对象类型默认值时更加健壮和安全。开发者在使用时应该注意组件版本，确保使用包含此修复的版本(v2.63.0-beta.0及以上)。