Material-UI的Select选择框选中后不更新值怎么办？

俊含提问于 2026-02-08 20:01:28 阅读 67

组件

在用Material-UI的Select组件做下拉框时，选中选项后页面显示变了但实际值没变，搞了半天没搞定。

我按照文档写了这样的代码：


import { Select, MenuItem } from '@mui/material';

function MySelect() {
  const [value, setValue] = React.useState('');

  return (
    <Select value={value} onChange={(e) => setValue(e.target.value)}>
      <MenuItem value="option1">选项1</MenuItem>
      <MenuItem value="option2">选项2</MenuItem>
    </Select>
  );
}

但控制台报”Material-UI: The Select component requires a value prop…”警告，选中后console.log(value)还是空字符串，明明初始化了useState(”)啊？

我来解答赞 9 收藏

反馈

1 条解答

翌萱（打工版） Lv1

这问题我之前踩过坑，根本原因是你没给 Select 加 labelId 属性，而且 value 初始值虽然是空字符串，但 MUI 的 Select 对受控组件要求很严格，稍微不对就直接不更新。

性能上来说，这种卡住不更新还会导致无意义的重渲染。解决方法很简单：

加上 displayEmpty 或者给一个有效的 labelId，同时确保 value 类型和 MenuItem 的 value 一致。你现在的写法其实逻辑没问题，缺个 labelId 就行了。

改一下代码：

function MySelect() {

  const [value, setValue] = React.useState('');



  return (

    
      labelId="demo-select-label"

      id="demo-select"

      value={value}

      onChange={(e) => setValue(e.target.value)}

    >

      选项1

      选项2

    

  );

}

labelId 可以随便起个名字，只要和内部匹配就行。id 建议也加上，不然控制台还是会有警告。这样改完不仅值能正常更新，性能上也不会因为 warning 导致额外开销。

如果你不想显示 label，可以用 Typography 隐藏或者用 FormControl 包一层加 label，但至少得有个 labelId 占位。MUI 这块为了可访问性搞得太死，但按这个改绝对好使。

2026-02-08 22:30