Arco Design 表单数据获取机制深度解析

表单数据获取的默认行为

在 Arco Design 的表单组件中，默认情况下只会返回当前处于挂载状态的 Form.Item 对应字段的值。这种设计是出于性能考虑，避免返回不必要的字段数据。例如，一个表单可能有10个字段，但用户只修改了其中3个，那么表单验证通过后默认只会返回这3个字段的数据。

获取完整表单数据的解决方案

方法一：使用隐藏的表单项

对于需要获取但不需要显示的表单字段，可以通过创建隐藏的 Form.Item 来实现：

<Form.Item field="hiddenField" hidden>
  <Input />
</Form.Item>

这种方式可以确保该字段会被包含在表单提交数据中，同时不会影响UI展示。

方法二：使用 getFields 方法

Arco Design 提供了 getFields 方法，可以获取表单中所有字段的值，包括未修改的字段：

const formRef = useRef();

// 获取所有字段值
const allValues = formRef.current.getFields();

Form.List 的特殊处理

空数组的数据处理问题

当使用 Form.List 时，如果列表中没有数据，表单验证通过后返回的数据中不会包含该字段。这在某些场景下可能会产生问题，特别是使用 PATCH 方法向后端提交数据时。

解决方案建议

1. 初始化时设置默认值：在表单初始化时为可能为空的 Form.List 设置空数组作为默认值

<Form initialValues={{ listField: [] }}>
  <Form.List field="listField">
    {/* ... */}
  </Form.List>
</Form>

2. 提交前数据处理：在表单提交前对数据进行处理，确保空列表字段被正确包含

const handleSubmit = (values) => {
  const finalValues = {
    ...values,
    listField: values.listField || []
  };
  // 提交 finalValues
};

最佳实践建议

1. 明确数据需求：在设计表单时，明确哪些字段需要完整返回，哪些只需要返回修改的部分

2. 前后端约定：与后端API约定好空值的处理方式，统一使用null、undefined还是空数组

3. 表单设计一致性：保持表单字段的初始值与后端数据结构一致，避免歧义

4. 数据转换层：在表单提交前添加数据转换层，统一处理各种边界情况

通过理解 Arco Design 表单的这些特性和采用适当的解决方案，开发者可以更好地控制表单数据的获取和处理，满足各种业务场景的需求。