Material UI下拉组件受控化问题：选中项无法正常显示

问题根源 #

你的组件当前处于混合模式：父组件未传递value时，Select是非受控组件；硬写value=''后变成受控，但值固定为空白，无法响应用户选择。控制台报错正是因为组件在非受控和受控状态间切换。

修复步骤 #

1. 父组件维护筛选状态

父组件需要通过useState管理选中值，将状态和更新函数传递给子组件：

import { useState } from 'react';

// 初始化状态为默认选中项的value（对应第一个选项的空字符串）
const [filterStatus, setFilterStatus] = useState('');

// 更新选中状态的回调函数
const handleFilterValue = (event) => {
  setFilterStatus(event.target.value);
};

// 渲染DropdownFltr时传递受控值和回调
<DropdownFltr
  prompt='Status...'
  options={status}
  onChange={handleFilterValue}
  value={filterStatus} // 新增：传递受控状态值
/>

2. 子组件正确接收并使用value

修改DropdownFltr组件，移除硬写的value=''，改用父组件传递的value，同时设置默认值避免非受控状态：

export default function DropdownFltr(props) {
  // 解构时给value设置默认值，确保组件始终处于受控状态
  const { error = null, options, prompt, onChange, value = '', ...other } = props;

  return (
    <>
      <FormControl>
        <InputLabel>{prompt}</InputLabel>
        <Select
          value={value} // 使用父组件传递的受控值
          onChange={onChange}
          {...other}
          {...(error && { error: true, helperText: error })}
        >
          {options.map((option) => (
            <MenuItem 
              key={option.id} 
              value={option.value} 
            >
              {option.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </>
  );
}

效果说明 #

• 父组件通过useState完全控制选中值，DropdownFltr成为纯受控组件，不会再出现状态切换的控制台报错。
• 用户选择选项时，状态会实时更新，Select会根据value匹配对应的MenuItem，正确显示选中的选项文本。

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