ant design 自定义表单列表：如何处理数组内部的数组答案

【问题标题】：ant design custom Form List: How to handle Array inside an arrayant design 自定义表单列表：如何处理数组内部的数组
【发布时间】：2022-08-15 17:26:16
【问题描述】：

我从后端收到的数据如下所示：

 const pronounsExample = [
  [
    {
      id: \'62f51edbbd529a9306052013\',
      title: \'He / Him / His\',
    },
  ],
  [
    {
      id: \'62f51ef8bd529a9306052014\',
      title: \'She / Her / Her\',
    },
  ],
]

每当我有一个对象数组但上面的值不同时，我都会使用 Form.List，因为它是数组内部的数组，然后是内部的对象，我想构建一个表单项，以便用户可以操作这些值和表单应该以上述格式返回所需的数据：

当我有一个对象数组时，这是我使用的：

 <Form.List name=\"pronouns\" initialValue={data?.pronouns}>
        {(fields, { add, remove }) => {
          console.log(\'List Fields\', fields)
          return (
            <div>
              <Row gutter={[16, 16]} justify=\"end\">
                <Col>
                  <Button onClick={() => add()} className=\"mb-2\">
                    <PlusOutlined /> {messages.buttons.add}
                  </Button>
                </Col>
              </Row>
              {fields.map((field) => (
                <Row key={field.key} gutter={[16, 16]}>
                  <Form.Item name={[field.name, \'id\']} hidden>
                    <Input />
                  </Form.Item>
                  <Col flex={1}>
                    <Form.Item name={[field.name, \'nameTranslate\']}>
                      <Input />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Button
                      type=\"danger\"
                      onClick={() => remove(field.name)}
                      disabled={fields.length === 0}
                      icon={<DeleteOutlined />}
                    />
                  </Col>
                </Row>
              ))}
            </div>
          )
        }}
      </Form.List>

有用的网址：

https://ant.design/components/form/#Form.List

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

比方说，我猜你的问题是将对象数组转换为对象数组，对吗？

如果是，我的解决方案是：

let filteredArray = [];
for (let i = 0; i < pronounsExample.length; i++){
       filterdArray.push([...pronounsExample[i]])
    }

所以，initialValues = filteredArray[0]

【讨论】：