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

Question

给出数据：

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

我有一个像这样的蚂蚁表格：

<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 级似乎不起作用。

我无法弄清楚，第三级有何不同...有人可以帮我吗？

标签： reactjsantdant-design-pro

Answer 1

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

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

我看到您的第三个<Form.Item>元素与您的第一个表单元素几乎相同，这可能引起了混乱？不管怎样，我把一个 CodeSandbox 放在一起，

https://codesandbox.io/s/qgzb7