MUI Select组件onChange事件返回undefined，无法获取选中值求助

问题1：错误使用了<Option>标签 #

MUI的Select组件需要使用<MenuItem>作为下拉选项的容器，而非自定义的<Option>标签。错误的组件类型会导致Select无法识别选项值，进而无法正常更新状态。

修复后的Select代码：

import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

// ...

<Select
  name="year"
  placeholder="Select year..."
  value={formdata.year || ""}
  onChange={onchangehandle}
>
  <MenuItem value="I">I</MenuItem>
  <MenuItem value="II">II</MenuItem>
  <MenuItem value="III">III</MenuItem>
  <MenuItem value="IV">IV</MenuItem>
</Select>

问题2：初始状态未匹配选项值类型 #

你的formdata初始为空对象，formdata.year的值为undefined，但Select的选项值是字符串类型。当value为undefined时，组件无法正确匹配选中项，导致状态更新异常。

可以通过两种方式修复：

• 修改初始状态，给year设置空字符串默认值：

const [formdata, setformdata] = useState({ year: "" });

• 直接在Select的value属性中处理undefined：

value={formdata.year ?? ""}

问题3：事件处理的兼容性优化（可选） #

部分场景下，MUI组件的onChange回调中e.target.value可能出现获取异常，可改用回调的第二个参数直接获取选中值：

const onchangehandle = (e, child) => {
  setformdata((prevState) => ({
    ...prevState,
    [e.target.name]: child.props.value,
  }));
};

完成以上修改后，Select组件即可正常返回选中值并更新表单状态。

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