如何将对象数组映射为MUI Select组件的MenuItem选项

你的代码里有两个关键错误，导致选项渲染失败：

1. map参数顺序搞反了：map((index, e) => {}) 里的第一个参数是遍历到的元素对象，第二个才是索引。你把顺序弄反了，导致后续的key、value都用错了。
2. MenuItem的value和显示内容没取对字段：你直接用了e（实际是索引），但应该从每个choice对象里取id作为value，title作为显示文本。

修正后的代码如下：

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

额外优化建议 #

如果item.id是唯一值，建议用它作为key，比索引更稳定：

<MenuItem key={item.id} value={item.id}>
    {item.title}
</MenuItem>

内容的提问来源于stack exchange，提问作者Ciaran Crowley