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

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

组件

我在用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选择

我来解答赞 1 收藏

反馈

1 条解答

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