React中MUI Select组件遍历数组数据不显示问题求助

你的代码存在两个核心问题导致下拉框为空：

问题1：map参数顺序错误 #

Array.map()的参数顺序是数组元素在前，索引在后，你当前的写法(key, value)把元素和索引搞反了，导致后续渲染的是索引值而非实际数据，同时也会引发key的不合理使用。

问题2：map回调未返回组件 #

你在map的大括号{}内定义了<MenuItem>，但没有通过return语句返回它，React无法捕获到要渲染的元素，因此下拉框没有选项。

修复后的代码 #

方式1：显式return返回组件 #

let categories = ["data 1", "data2 ", "data3"];

<FormControl sx={{ minWidth: 120 }}>
  <InputLabel id="demo-simple-select-helper-label">
    Category
  </InputLabel>
  <Select
    labelId="demo-simple-select-helper-label"
    id="demo-simple-select-helper"
    value=""
    label="Category"
    onChange={handleCategoryChange}>
    {categories.map((item, index) => {
      console.log(item); // 打印实际数据
      return (
        <MenuItem key={index} value={item}>
          {item}
        </MenuItem>
      );
    })}
  </Select>
</FormControl>

方式2：使用箭头函数隐式返回 #

去掉大括号，用括号直接包裹JSX，自动返回组件：

{categories.map((item, index) => (
  <MenuItem key={index} value={item}>
    {item}
  </MenuItem>
))}

额外提示 #

• 如果数组内的item是唯一值，建议用item作为key（比如key={item}），比索引更符合React的渲染优化逻辑；若存在重复值，再使用index作为key。
• 确保handleCategoryChange函数已正确定义，避免后续选择选项时无响应。

内容的提问来源于stack exchange，提问作者Shiv Shankar Prasad