如何将对象数组映射输出为Material-UI的MenuItem列表组件

DevOps 小满

2026-10-4

问题原因

map回调参数使用错误：Array.prototype.map的第一个入参是当前遍历到的数组元素对象，第二个入参是元素索引，你之前直接写(id, name)无法正确读取对象内的属性
属性未正确利用：数组中存储的RGB颜色值没有被用到，ListItemIcon无实际显示内容

正确实现代码

两种写法都可以，按需选择：

写法1：先取元素对象再解构

{statusColorsArr.map((item) => {
  const { id, name, colourR, colourG, colourB } = item
  return (
    <MenuItem key={id} value={name} className={classesF.A}>
        <Checkbox className={classesF.D} />
        <ListItemText primary={id} />
        <ListItemText primary={name} />
        {/* 渲染对应状态色块 */}
        <ListItemIcon>
          <div style={{ 
            width: '18px', 
            height: '18px', 
            backgroundColor: `rgb(${colourR},${colourG},${colourB})`,
            borderRadius: '3px'
          }} />
        </ListItemIcon>   
    </MenuItem>
  )
})}

写法2：参数位置直接解构（更简洁）

{statusColorsArr.map(({id, name, colourR, colourG, colourB}) => (
    <MenuItem key={id} value={name} className={classesF.A}>
        <Checkbox className={classesF.D} />
        <ListItemText primary={id} />
        <ListItemText primary={name} />
        <ListItemIcon>
          <div style={{ 
            width: '18px', 
            height: '18px', 
            backgroundColor: `rgb(${colourR},${colourG},${colourB})`,
            borderRadius: '3px'
          }} />
        </ListItemIcon>   
    </MenuItem>
))}