Ant Design选择内部形式循环数组

Question

我有一系列类似的产品属性

[
{
name: 'Color',
options: ['Blue', 'Green', 'White'],
},
{
name: 'Size',
options: ['X', 'L', 'XL'],
}
]

我试着像一样在选择中显示它

<Form.List name="properties">
{properties =>
properties.map(property => {
// options: Array(3)
//   0: "Blue"
//   1: "Green"
//   2: "White"
// _id: "5e71f09d6fa4bb28ee5a87e4"
// name: "Color"
return (
<Form.Item {...property.options}>
<Select name={property.name}>
<Option />
</Select>
</Form.Item>
);
})
}
</Form.List>

但我得到了一个没有任何值的空Select：(有人能帮我吗？

Answer 1

您正在使用{properties => ...}创建一个从未调用过的函数。因此，直接将properties.map(...)渲染为子级即可，例如：

<Form.List name="properties">
{
properties.map(property => {
return (
<Form.Item {...property.options}>
<Select name={property.name}>
<Option />
</Select>
</Form.Item>
);
}
}
</Form.List>

Answer 2

您需要在Select:中映射options

options.map((option) => <Select.Option key={option} value={option}>{option}</Select.Option>);

<Form.List name="properties">
{properties.map(({ options, name, id }) => {
// options: Array(3)
//   0: "Blue"
//   1: "Green"
//   2: "White"
// _id: "5e71f09d6fa4bb28ee5a87e4"
// name: "Color"
return (
<Form.Item key={id} name={name}>
<Select>
{options.map((option) => (
<Select.Option key={option} value={option}>{option}</Select.Option>
))}
</Select>
</Form.Item>
);
})
}
</Form.List>

Answer 3

const [value, setValue] = useState();

<Form.Item key={id} name={name}>
<Select
onChange={value=>{setValue(option)}}
value={option}
>
{options.map((option) => (
<Select.Option key={option} value={option}>{option}</Select.Option>
))}
</Select>
</Form.Item>