React+MUI Select组件无法选择MenuItem及显示空白问题

问题1：MUI值超出范围报错 #

当isItFirst为false时，你用<div>包裹了<MenuItem>，但MUI的Select组件仅能识别直接子节点为<MenuItem>或<OptGroup>的元素，<div>会被组件忽略，导致Select认为没有可用选项。如果此时myOptions的值不在“无选项”的合法值（如空字符串）范围内，就会抛出值超出范围的报错。另外，你的useEffect在isItFirst为true时会把myOptions设为1，但当isItFirst切换为false后，若未同步更新myOptions到当前可用选项（2或3），也会触发该报错。

问题2：Select显示空白 #

同样是因为用<div>嵌套了<MenuItem>，Select无法识别div内部的选项节点，所以渲染空白。

修复代码 #

import * as React from "react";
import {
  Typography,
  Button,
  Dialog,
  Box,
  Select,
  InputLabel,
  FormControl,
  MenuItem,
  SelectChangeEvent
} from "@mui/material";

enum MyOptions {
  FIRST = 1,
  SECOND = 2,
  THIRD = 3
}

export default function App() {
  const [open, setOpen] = React.useState(true);
  const [myOptions, setMyOptions] = React.useState(MyOptions.SECOND as number);
  
  const handleChange = (event: SelectChangeEvent) => {
    const nr = parseInt(event.target.value, 10);
    setMyOptions(nr);
  };

  const isItFirst: boolean = false;

  const handleClose = () => {
    setOpen(false);
  };

  const somethingHappens = () => {
    console.log("clicked: ", myOptions);
    setOpen(false);
  };

  React.useEffect(() => {
    if (isItFirst) {
      // 切换为仅显示第一个选项时，强制设置值为1
      setMyOptions(MyOptions.FIRST);
    } else {
      // 切换为显示全部选项时，若当前值是1（仅在isItFirst为true时合法），默认切换到2
      if (myOptions === MyOptions.FIRST) {
        setMyOptions(MyOptions.SECOND);
      }
    }
  }, [isItFirst, myOptions]);

  return (
    <div>
      <Button
        variant="contained"
        size="small"
        onClick={() => setOpen(true)}
      >
        Display dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box p={2}>
          <Typography id="modal-modal-title" variant="h6" component="h4">
            Select one of the options
          </Typography>
          <FormControl fullWidth sx={{ mt: 2 }}>
            <InputLabel id="options-label">Options</InputLabel>
            <Select
              labelId="options-label"
              id="options-select"
              value={myOptions}
              label="Options"
              onChange={handleChange}
            >
              {/* isItFirst为true时仅显示第一个选项 */}
              {isItFirst ? (
                <MenuItem value={MyOptions.FIRST}>This is first</MenuItem>
              ) : (
                // 直接渲染所有MenuItem，不要用div包裹
                <>
                  <MenuItem value={MyOptions.FIRST}>This is first</MenuItem>
                  <MenuItem value={MyOptions.SECOND}>This is second</MenuItem>
                  <MenuItem value={MyOptions.THIRD}>This is third</MenuItem>
                </>
              )}
            </Select>
          </FormControl>
        </Box>
        <Box p={2} display="flex" justifyContent="flex-end">
          <Button
            variant="contained"
            size="small"
            onClick={somethingHappens}
          >
            Select
          </Button>
        </Box>
      </Dialog>
    </div>
  );
}

关键修改点 #

1. 移除<div>包裹：将else分支里的<div>替换为React片段<>，让<MenuItem>成为Select的直接子节点，确保组件能正确识别选项。
2. 同步状态值：在useEffect中新增逻辑，当isItFirst从true切换为false时，若当前myOptions是1（仅在isItFirst为true时合法），自动切换到2，避免值超出可用选项范围。
3. 完善组件属性：给Select和InputLabel设置了匹配的id，同时添加了基础样式（如fullWidth、sx）优化布局。

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