如何在MUI v4 Select中通过数组映射创建Optgroup并解决值捕获问题

问题根源在于你用div包裹了ListSubheader和MenuItem，MUI的Select组件仅能识别直接子级的MenuItem或ListSubheader，嵌套div会破坏组件内部的选中逻辑，导致无法正确传递选中值，最终出现值为undefined的情况。

修复方案： #

• 移除包裹ListSubheader和MenuItem的div元素，让二者直接作为Select的子元素
• 给MenuItem添加value属性，绑定对应的选项标识，确保handleChange能捕获到有效选中值

修改后的代码示例： #

{arr?.map((option, i) => (
  <>
    <ListSubheader key={`header-${i}`}>{option}</ListSubheader>
    <MenuItem key={option} value={option}>
      {objectData[option]}
    </MenuItem>
  </>
))}

关键细节说明： #

1. 用React片段(<>)替代div分组元素，避免额外DOM节点干扰Select的内部逻辑
2. MenuItem的value属性是核心，它直接决定了handleChange事件中返回的选中值
3. 给ListSubheader设置独立的key，避免与MenuItem的key产生冲突

调整后，Select就能正常识别选中项，handleChange也能正确捕获到对应的值。

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