我怎样才能 map 对象数组到 MUI Select 字段的 MenuItems

Question

我有一个数组fieldChoices 。 我想要 map 字段选择的值来为 MUI Select 字段创建选项，但我未能成功完成此操作。

这就是我填充fieldChoices的方式：

fieldChoices = {
    choices: filtered_status.map(function (item) {
        return {
            id: item.IntakeID,
            title: item.Title,
        };
    }),
};

填充后， fieldChoices遵循以下结构： {choices: [{id: 123, title: "321"}, {id: 456, title: "654"}]

这就是我尝试 map 菜单项的方式：

<TextField value={ID || ""} select>
    {fieldChoices?.choices?.map((index, e) => {
        return (
            <MenuItem key={index} value={e}>
                {e}
            </MenuItem>
        );
    })}
</TextField>

Answer 1

map 的第一个参数是当前元素，第二个参数是索引。 注意：最好使用 id 作为键而不是索引。

{fieldChoices?.choices?.map((e, index) => {
    return (
        <MenuItem key={e.id} value={e.id}>
            {e.id + e.title}
        </MenuItem>
    );
})}