MUI+TypeScript多选下拉框无法选中及更新值问题求助

问题分析及修复步骤 #

1. 组件Props解构错误 #

你的dropdownMultiSelect组件中，解构Props时误用了handleInputChange，但父组件传入的是onChange属性，导致组件无法正确触发父组件的状态更新函数，这是复选框无法选中、值不更新的核心原因。

修复代码：
修改组件的Props解构逻辑：

const { label, name, onChange, prompt, value, url } = props;

同时在Select组件中绑定正确的onChange回调：

<Select
  multiple
  name={name}
  value={value}
  onChange={onChange}
  // 其他属性保留
>

2. useEffect依赖缺失 #

当前useEffect的依赖数组为空，当url参数变化时不会重新请求数据。虽然当前数据能正常填充，但为了组件健壮性，需要添加url作为依赖项：

React.useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get(url);
    setOptions(res.data);
  };
  fetchData();
}, [url]); // 添加url到依赖数组

3. renderValue函数逻辑错误 #

renderValue中尝试访问x.materialName，但value是选中的option.id数组（并非对象数组），会导致x.materialName为undefined。需要根据ID匹配对应的选项名称：

修复代码：

renderValue={(selected) => {
  const selectedNames = selected.map(id => {
    const option = options.find(opt => opt.id === id);
    return option ? option.name : '';
  });
  return selectedNames.join(', ');
}}

4. 移除重复的组件导入 #

组件中重复导入了Material-UI的组件，删除冗余的导入行：

// 移除这行重复导入
// import { FormControl, FormHelperText, InputLabel, Select, MenuItem, ListItemText, OutlinedInput } from '@material-ui/core';

5. 初始状态优化建议 #

父组件中values初始状态为{} as any，建议明确初始化materials为空数组，避免value?.includes(option.id)出现不必要的undefined判断：

const [values, setValues] = React.useState({ materials: [] } as any);

完整修复后的组件代码 #

import * as React from 'react';
import axios from 'axios';
import { Checkbox, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';

export default function dropdownMultiSelect(props) {
  const { label, name, onChange, prompt, value, url } = props;
  const [options, setOptions] = React.useState([]);

  // Fetch Data for Dropdown list
  React.useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(url);
      setOptions(res.data);
    };
    fetchData();
  }, [url]); 

  return (
      <FormControl variant='outlined' >
        <InputLabel>{label}</InputLabel>
        <Select
          multiple
          name={name}
          value={value}
          onChange={onChange}
          renderValue={(selected) => {
            const selectedNames = selected.map(id => {
              const option = options.find(opt => opt.id === id);
              return option ? option.name : '';
            });
            return selectedNames.join(', ');
          }}
        >
          {options.map((option) => (
            <MenuItem
              key={option.id}
              value={option.id}
            >
              <Checkbox checked={value?.includes(option.id)} />
              {option.name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
  );
}

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