antd 表单使用复杂的多级嵌套对象进行初始化

Question

给出数据：

formValues = {
  level: {
    test: data1,
    level2: {
      test: data2,
      level3: { 
        test: data3
      }
    }
  } 
}

我有一个像这样的 Ant 表单：

<Form
    form={form}
    name="demo"
    onFinish={onFinish}
    initialValues={formValues}
>
    <Form.Item label="Sub1" name={['level', 'test']}>
        <Input placeholder="Sub1" />
    </Form.Item>
    <Form.Item label="Sub2" name={['level.level2', 'test']}>
        <Input placeholder="Sub2" />
    </Form.Item>
    <Form.Item label="Sub1" name={['level.level2.level3', 'test']}>
        <Input placeholder="Sub1" />
    </Form.Item>
</Form>

也许有人知道为什么我不能启动第三级？ 1 级和 2 级正在显示，但 3 级似乎不起作用。

我不知道，第三级有什么不同...谁能帮帮我？

Answer 1

我不明白您要做什么，但在我的测试中，如果您想到达“data3”，这是正确的路径。

formValues.level.level2.level3 将返回 {"test": "data3"}

我看到您的第三个<Form.Item> 元素与您的第一个表单元素几乎相同，这可能会造成混淆？反正我扔了一个 CodeSandbox，

https://codesandbox.io/s/qgzb7

Answer 2

antd documentation for Form 给出了表单嵌套的示例，但仅适用于第一级。

我在其他地方找不到使用多个级别的示例，但我发现添加额外的索引来表示每个级别就可以了。

而不是这个：

<Form.Item label="Sub1" name={['level.level2.level3', 'test']}>
    <Input placeholder="Sub1" />
</Form.Item>

试试这个：

<Form.Item label="Sub1" name={['level', 'level2', 'level3', 'test']}>
    <Input placeholder="Sub1" />
</Form.Item>

Codesandbox