Material-UI的Select默认选项不显示还报错怎么办？

长孙清梅提问于 2026-02-13 21:05:23 阅读 71

组件

我在用Material-UI的Select组件时设置了defaultValue，但页面显示为空，控制台还报错说”Warning: A component is changing the uncontrolled input”，这是什么问题？

我这样写的：

import { Select, MenuItem } from '@material-ui/core';

function MySelect() {
  return (
    <Select defaultValue={'option1'}>
      <MenuItem value="option1">选项1</MenuItem>
      <MenuItem value="option2">选项2</MenuItem>
    </Select>
  );
}

尝试改成controlled组件加useState后选项能显示了，但选中其他选项后状态没变化，控制台又出现新警告，感觉哪里没对齐？

Select选择

我来解答赞 5 收藏

反馈

2 条解答

上官一莹 Lv1

这个问题的根本原因是Material-UI的Select需要配合FormControl和InputLabel使用，这是官方组件设计的要求。

先说第一个问题：defaultValue设置了但不显示还报错

Material-UI的Select必须放在FormControl里面，并且需要InputLabel来显示标签。这样写：

import { Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';function MySelect() {

  return (

    

      选择选项

      

    

  );

}

不加FormControl包裹的话，Select内部状态管理会出问题，defaultValue就不生效。

再说controlled组件的问题，你改成useState后状态没变化，大概率是onChange没写对。看一下你的onChange回调：

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




  value={value}

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

>

注意event.target.value这个路径，Material-UI的Select事件对象结构就是这样，不是event.value。

如果状态更新了但界面没变，检查一下value属性是不是正确传给了Select。还有个常见坑：如果MenuItem的value是数字类型，那state也要用数字，别用字符串。

另外提一嘴，如果你的场景不需要双向绑定，uncontrolled模式+FormControl就够用了，代码更简洁，效率也更高。

2026-03-19 16:08

UE丶曦月 Lv1

这问题其实跟WordPress没啥关系，不过既然你问了，我就给你捋一捋。Material-UI的Select组件确实有点坑，特别是defaultValue和受控组件的状态管理这块。

你的问题是defaultValue用得不对，defaultValue是给非受控组件用的，但Material-UI的Select组件内部其实是个受控组件，所以直接用defaultValue会导致状态不一致，控制台就报错了。

正确的做法是用value和onChange来管理状态，确保它是受控的。比如这样写：

import React, { useState } from 'react';

import { Select, MenuItem } from '@material-ui/core';



function MySelect() {

  const [selectedValue, setSelectedValue] = useState('option1');



  const handleChange = (event) => {

    setSelectedValue(event.target.value);

  };



  return (

    <Select value={selectedValue} onChange={handleChange}>

      <MenuItem value="option1">选项1</MenuItem>

      <MenuItem value="option2">选项2</MenuItem>

    </Select>

  );

}

这里的关键点是用useState来管理选中的值，value绑定状态，onChange更新状态。这样写完之后，选中状态就能正常同步了，警告也会消失。

如果你非要用非受控组件，那可以试试useRef，不过在Material-UI里，受控组件才是推荐的做法。别问我为什么，React生态就这样，习惯了就好。

对了，记得检查一下你的Material-UI版本，老版本可能会有奇怪的bug，升级到最新版能省不少事。

2026-02-14 07:03