Ant Design 中 Form.List 与 initialValues 的配合使用注意事项

初始值设置的正确方式

在使用 Ant Design 的 Form 组件时，initialValues 是一个常用的属性，用于设置表单的初始值。然而，当与 Form.List 一起使用时，开发者需要注意 initialValues 的数据结构要求。

常见误区分析

许多开发者在使用 Form.List 时，会尝试直接为 initialValues 传递数组类型的数据，这会导致组件行为异常。实际上，initialValues 属性要求必须是一个对象（Object）类型，而不能直接传递数组。

正确的数据结构

对于包含 Form.List 的表单，initialValues 应该采用以下结构：

{
  listName: [
    { field1: 'value1', field2: 'value2' },
    { field1: 'value3', field2: 'value4' }
  ]
}

其中 listName 是 Form.List 的 name 属性值，其值是一个数组，数组中的每个元素代表列表中的一项。

实际应用示例

假设我们需要创建一个动态增减的表单列表，用于收集用户的多组联系信息：

<Form
  initialValues={{
    contacts: [
      { name: '张三', phone: '13800138000' },
      { name: '李四', phone: '13900139000' }
    ]
  }}
>
  <Form.List name="contacts">
    {(fields, { add, remove }) => (
      <>
        {fields.map(({ key, name, ...restField }) => (
          <Space key={key}>
            <Form.Item
              {...restField}
              name={[name, 'name']}
              rules={[{ required: true }]}
            >
              <Input placeholder="姓名" />
            </Form.Item>
            <Form.Item
              {...restField}
              name={[name, 'phone']}
              rules={[{ required: true }]}
            >
              <Input placeholder="电话" />
            </Form.Item>
          </Space>
        ))}
      </>
    )}
  </Form.List>
</Form>

注意事项

1. 初始值中的字段名必须与 Form.List 的 name 属性完全匹配
2. 数组中的每个对象应该包含 Form.List 内部 Form.Item 所对应的字段
3. 当需要清空初始值时，可以设置为 undefined 或 null，而不是空数组

总结

理解 Ant Design 中 Form.List 与 initialValues 的正确配合方式，可以帮助开发者避免常见的表单初始化问题。记住 initialValues 必须是一个对象，而 Form.List 对应的值应该是该对象中的一个数组属性。这种设计保持了 Ant Design 表单数据结构的统一性，同时也提供了足够的灵活性来处理复杂的动态表单场景。