如何在MUI多选下拉框的renderValue中显示选项名称而非ID

问题背景 #

使用MUI多选下拉组件时，需要实现以下需求：

• 关闭下拉框后，选中项显示选项名称并以逗号分隔，而非当前显示的选项ID
• 必须保留MenuItem的value为选项ID，确保后续能将正确的ID写入数据库
• 尝试通过选中ID匹配options数组获取名称，但实现过程中遇到逻辑问题

示例选项数据：

[
  {"id": 1, "name": "Option-1"},
  {"id": 2, "name": "Option-2"},
  {"id": 3, "name": "Option-3"}
]

当前renderValue输出：1, 2, 3，期望输出：Option-1, Option-2, Option-3

核心问题分析 #

你的实现思路是正确的，但存在两个关键问题：

1. Select组件在多选模式下，value必须是数组类型，你之前的空值处理将其设为空字符串''，导致renderValue中的匹配逻辑失效
2. 直接用Array.includes循环查找ID，在选项较多时性能较差

修正后的实现代码 #

多选下拉组件 #

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, value, url } = props;
  const [options, setOptions] = React.useState([]);

  // 补充Axios获取选项数据的逻辑
  React.useEffect(() => {
    if (url) {
      axios.get(url)
        .then(res => setOptions(res.data))
        .catch(err => console.error('加载选项失败:', err));
    }
  }, [url]);

  // 统一处理value，确保始终为数组类型
  const selectedIds = Array.isArray(value) ? value : [];

  return (
    <FormControl>
      <InputLabel>{label}</InputLabel>
      <Select
        multiple
        name={name}
        value={selectedIds}
        onChange={onChange}
        renderValue={(selected) => {
          // 用Set优化ID查找效率，避免重复遍历
          const selectedIdSet = new Set(selected);
          const selectedNames = options
            .filter(option => selectedIdSet.has(option.id))
            .map(option => option.name);
          return selectedNames.join(', ');
        }}
      >
        {options.map((option) => (
          <MenuItem 
            key={option.id}
            value={option.id}
          >
            <Checkbox checked={selectedIds.includes(option.id)} />
            {option.name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

变更处理函数 #

保持原有逻辑即可，因为Select传递的value仍然是ID数组，完全满足写入数据库的需求：

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

const handleInputChange = e => {
  const { name, value } = e.target;
  setValues({
    ...values,
    [name]: value
  });
  if (validateOnChange) { validate({ [name]: value }); }
};

关键优化点 #

• 统一value的数组类型：避免空字符串导致的匹配逻辑异常
• 使用Set优化查找：将ID查找的时间复杂度从O(n)降为O(1)，提升大量选项时的性能
• 保留MenuItem的value为ID：确保业务数据的正确性，不影响后续数据库写入操作

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