React中用Select展示数据库数据，选中值返回undefined问题求助

问题描述 #

使用@material-ui/core的Select组件展示数据库数据时，下拉选项能正常渲染，但选中任意选项后，绑定的fileID状态始终为undefined，相关代码如下：

import {
    Select,
    MenuItem,
    FormControl,
    InputLabel,
  } from "@material-ui/core";

function FilePush() {
const [categorias, setCategorias] = useState([]);
const [fileID, setFileID] = useState("");

    return (
        <Container component="main" maxWidth="xs">
        <Select onChange={(e) => setFileID(e.target.value)}>
        <MenuItem value="None">
          <em>None</em>
        </MenuItem>

        {categorias.map((categoria,index ) => {
        return (
          <div key={index}>

            {categoria.json.map((f) => {
              return (
                <div key={f.filename}>

                   <MenuItem key={f.filename} value={f.filename} >{f.filename}</MenuItem>
                </div>
              );
            })}

            <hr />
          </div>
        );
      })}
         </Select>
         
         <p>You Selected: {fileID}</p>

    )
}
}

export default FilePush;

问题原因 #

Material-UI的Select组件要求直接子元素只能是MenuItem（或官方支持的菜单选项组件），你在Select内部嵌套了div和hr这类非预期的元素，这些元素会干扰Select的事件委托逻辑，导致选中选项时无法正确读取e.target.value，最终fileID被设置为undefined。

解决方案 #

移除Select内部的div和原生hr，如果需要实现分组标题或分隔线，使用Material-UI官方提供的ListSubheader和Divider组件，它们是专门为菜单场景设计的，不会破坏Select的事件处理。

修改后的代码示例：

import {
    Select,
    MenuItem,
    FormControl,
    InputLabel,
    ListSubheader, // 新增导入
    Divider // 新增导入
  } from "@material-ui/core";

function FilePush() {
const [categorias, setCategorias] = useState([]);
const [fileID, setFileID] = useState("");

    return (
        <Container component="main" maxWidth="xs">
        <Select onChange={(e) => setFileID(e.target.value)}>
          <MenuItem value="None">
            <em>None</em>
          </MenuItem>

          {categorias.map((categoria, index ) => (
            <>
              {/* 用ListSubheader做分组标题（可根据需求调整） */}
              <ListSubheader key={`header-${index}`}>分组标题</ListSubheader>
              {categoria.json.map((f) => (
                <MenuItem key={f.filename} value={f.filename}>{f.filename}</MenuItem>
              ))}
              {/* 用Divider做分隔线 */}
              <Divider key={`divider-${index}`} />
            </>
          ))}
        </Select>
         
        <p>You Selected: {fileID}</p>
    )
}

export default FilePush;

额外说明 #

• 如果不需要分组标题，可直接去掉ListSubheader，只保留Divider实现分隔效果
• 确保所有直接嵌套在Select内的元素都是MenuItem、ListSubheader、Divider这类Material-UI菜单相关组件，不要插入原生的div、p等无关元素

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