如何在MUI下拉选择框中显示选中项？解决选中项不显示问题

选中的选项无法显示在输入区域中，相关代码如下：

export default function BasicSelect() {
  const [sortBy, setSortBy] = useState("");
  const [condition, setCondition] = useState("");
  const [delivery, setDelivery] = useState("");

  function handleChange(event) {
    const { value, id } = event.target;

    if (id === "sortBySelect") {
      setSortBy(value);
    } else if (id === "conditionSelect") {
      setCondition(value);
    } else if (id === "deliverySelect") {
      setDelivery(value);
    }
  }

  return (
    <Stack direction="row" spacing={2}>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="sortBylabel">Sort By</InputLabel>
        <Select
          labelId="sortBylabel"
          id="sortBySelect"
          value={sortBy}
          label="Sort By"
          onChange={handleChange}
        >
          <MenuItem value={1}>The cheapest</MenuItem>
          <MenuItem value={2}>The most expensive</MenuItem>
          <MenuItem value={3}>Top-rated</MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="conditionLabel">Condition</InputLabel>
        <Select
          labelId="conditionLabel"
          id="conditionSelect"
          value={condition}
          label="Condition"
          onChange={handleChange}
        >
          <MenuItem value={4}></MenuItem>
          <MenuItem value={5}></MenuItem>
          <MenuItem value={6}></MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="deliveryLabel">Delivery</InputLabel>
        <Select
          labelId="deliveryLabel"
          id="deliverySelect"
          value={delivery}
          label="Delivery"
          onChange={handleChange}
        >
          <MenuItem value={7}></MenuItem>
          <MenuItem value={8}></MenuItem>
          <MenuItem value={9}></MenuItem>
        </Select>
      </FormControl>
    </Stack>
  );
}

我原本想添加额外的state来存储选中的选项显示名称，但遇到了难题：MenuItem的value值和显示文本不一致，不知道该怎么正确存储对应的显示名称（MUI官方示例里也有这种value和名称不一致的情况）。

问题截图：

解决方案 #

核心问题拆解 #

1. 后两个Select的MenuItem是空标签，没有显示文本，自然无法展示选中内容；
2. state初始值是字符串类型，但MenuItem的value是数字，类型不匹配导致选中后无法正确渲染；
3. 完全不需要额外存储显示名称，MUI的Select组件会自动根据value匹配对应MenuItem的文本。

具体修复步骤 #

1. 补全空MenuItem的显示文本：给Condition和Delivery的MenuItem填上实际要展示的内容，比如：

// Condition的MenuItem示例
<MenuItem value={4}>全新</MenuItem>
<MenuItem value={5}>二手</MenuItem>
<MenuItem value={6}>翻新</MenuItem>
// Delivery的MenuItem示例
<MenuItem value={7}>标准配送</MenuItem>
<MenuItem value={8}>次日达</MenuItem>
<MenuItem value={9}>自提</MenuItem>

2. 统一state与value的类型：把state初始值改成和MenuItem的value一致的数字类型，比如设置默认选中第一个选项：

const [sortBy, setSortBy] = useState(1);
const [condition, setCondition] = useState(4);
const [delivery, setDelivery] = useState(7);

如果不需要默认选中，可将初始值设为null，同时给Select添加displayEmpty属性来支持空状态显示。

3. 无需额外维护显示文本的state：只要Select的value和MenuItem的value匹配，MUI会自动找到对应的MenuItem并显示其文本内容，不用单独存储显示名称。

修复后的完整代码 #

import { useState } from 'react';
import { Stack, FormControl, InputLabel, Select, MenuItem } from '@mui/material';

export default function BasicSelect() {
  // 初始值与MenuItem的value类型统一为数字
  const [sortBy, setSortBy] = useState(1);
  const [condition, setCondition] = useState(4);
  const [delivery, setDelivery] = useState(7);

  function handleChange(event) {
    const { value, id } = event.target;

    if (id === "sortBySelect") {
      setSortBy(value);
    } else if (id === "conditionSelect") {
      setCondition(value);
    } else if (id === "deliverySelect") {
      setDelivery(value);
    }
  }

  return (
    <Stack direction="row" spacing={2}>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="sortBylabel">Sort By</InputLabel>
        <Select
          labelId="sortBylabel"
          id="sortBySelect"
          value={sortBy}
          label="Sort By"
          onChange={handleChange}
        >
          <MenuItem value={1}>The cheapest</MenuItem>
          <MenuItem value={2}>The most expensive</MenuItem>
          <MenuItem value={3}>Top-rated</MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="conditionLabel">Condition</InputLabel>
        <Select
          labelId="conditionLabel"
          id="conditionSelect"
          value={condition}
          label="Condition"
          onChange={handleChange}
        >
          <MenuItem value={4}>全新</MenuItem>
          <MenuItem value={5}>二手</MenuItem>
          <MenuItem value={6}>翻新</MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="deliveryLabel">Delivery</InputLabel>
        <Select
          labelId="deliveryLabel"
          id="deliverySelect"
          value={delivery}
          label="Delivery"
          onChange={handleChange}
        >
          <MenuItem value={7}>标准配送</MenuItem>
          <MenuItem value={8}>次日达</MenuItem>
          <MenuItem value={9}>自提</MenuItem>
        </Select>
      </FormControl>
    </Stack>
  );
}

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