[英]ant design custom Form List: How to handle Array inside an array
The data I receive from the backend looks something like this:我从后端收到的数据如下所示:
const pronounsExample = [
[
{
id: '62f51edbbd529a9306052013',
title: 'He / Him / His',
},
],
[
{
id: '62f51ef8bd529a9306052014',
title: 'She / Her / Her',
},
],
]
I use Form.List whenever I have an array of objects but the above value is different, because it is array inside an array and then an object inside, I would like to build a form Item so that users can manipulate these values and the Form should return the requred data in the above format:每当我有一个对象数组但上面的值不同时,我都会使用 Form.List,因为它是数组内的数组,然后是 object,我想构建一个表单项,以便用户可以操作这些值和表单应该以上述格式返回所需的数据:
Here is what I use when I have an Array of Objects:当我有一个对象数组时,这是我使用的:
<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>
helpful links:有用的网址:
https://ant.design/components/form/#Form.List https://ant.design/components/form/#Form.List
Let's say, I guess your problem is converting an array of arrays of objects to an array of object, right?比方说,我猜您的问题是将对象数组 arrays 转换为 object 数组,对吗?
If yes, my solution is:如果是,我的解决方案是:
let filteredArray = [];
for (let i = 0; i < pronounsExample.length; i++){
filterdArray.push([...pronounsExample[i]])
}
So, initialValues = filteredArray[0]
所以,
initialValues = filteredArray[0]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.