如何修改React MUI Select组件的renderValue以显示printname数组？

核心思路是利用Select组件的renderValue属性，直接通过选中的code值从语言数组arr中匹配对应的printname，无需修改handleChange的逻辑（因为我们仍需将code作为URL参数传递给后端）。

1. 自定义renderValue实现显示转换 #

替换原renderValue的简单拼接逻辑，改为根据code查找对应printname：

renderValue={(selected) => {
  // 遍历选中的code数组，匹配对应的printname
  const displayNames = selected.map(code => {
    const matchedLang = arr.find(item => item.code === code);
    // 找不到匹配项时 fallback 到原始code，避免显示异常
    return matchedLang ? matchedLang.printname : code;
  });
  return displayNames.join(', ');
}}

2. 处理URL参数初始化（可选但关键） #

如果页面加载时URL已携带选中的code参数，需要初始化paramvalues并保证显示正常：

// 在组件内部添加初始化逻辑
useEffect(() => {
  const initialCodes = searchParams.get(paramUrlName)?.split(',') || [];
  setParamValues(initialCodes);
}, [searchParams, paramUrlName]);

完整修改后的代码 #

import React from "react";
import { useState, useEffect } from 'react';
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};


const MultipleSelectList = ({ cmpName, paramUrlName }) => {

  const arr = [
    {
      "code": "ita",
      "count": 184893,
      "printname": "Italian"
    },
    {
      "code": "eng",
      "count": 58135,
      "printname": "English"
    },
    {
      "code": "fre",
      "count": 36201,
      "printname": "French"
    }
  ]

  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const [paramvalues, setParamValues] = useState([]);

  // 从URL参数初始化选中值
  useEffect(() => {
    const initialCodes = searchParams.get(paramUrlName)?.split(',') || [];
    setParamValues(initialCodes);
  }, [searchParams, paramUrlName]);

  // 同步选中值到URL参数
  useEffect(() => {
    const newParams = Object.fromEntries(searchParams);
    if (paramvalues.length) {
      newParams[paramUrlName] = paramvalues.join(',');
    } else {
      // 无选中值时移除对应URL参数
      delete newParams[paramUrlName];
    }
    setSearchParams(newParams);
    navigate(`${location.pathname}?${new URLSearchParams(newParams).toString()}`);
  }, [paramvalues, searchParams, paramUrlName, location.pathname, navigate]);

  const handleChange = (event) => {
    const { target: { value } } = event;
    setParamValues(
      typeof value === 'string' ? value.split(',') : value
    );
  };

  return (
    <div>
      <FormControl sx={{ mb: 2, width: "100%" }}>
        <InputLabel id="demo-multiple-name-label">{cmpName}</InputLabel>
        <Select
          labelId="demo-multiple-name-label"
          id="demo-multiple-name"
          multiple
          value={paramvalues}
          onChange={handleChange}
          input={<OutlinedInput label={paramUrlName} notched />}
          renderValue={(selected) => {
            const displayNames = selected.map(code => {
              const matchedLang = arr.find(item => item.code === code);
              return matchedLang ? matchedLang.printname : code;
            });
            return displayNames.join(', ');
          }}
          MenuProps={MenuProps}
        >
          {arr?.map((lang) => (
            <MenuItem key={lang.code} value={lang.code}>
              {lang.printname} ( {lang.count} )
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
};

export default MultipleSelectList;

关键说明 #

• renderValue是Material-UI Select专门用于自定义选中项显示的API，直接在此处做code到printname的映射是最直接的方案，完全不需要改动handleChange的逻辑（毕竟我们仍需将code作为后端接口参数）。
• 初始化逻辑保证页面刷新后，URL参数对应的选中状态和显示内容一致。
• 优化了URL参数同步逻辑，无选中值时自动移除对应参数，更符合常规交互习惯。

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