MUI Autocomplete多选下拉：选中值不高亮、重复选择问题排查

你的MUI多选Autocomplete出现选中项无高亮、可重复选择的问题，核心原因是选项对象的引用不稳定以及缺少明确的选项相等判断逻辑，具体修复如下：

问题原因 #

1. 每次组件渲染时，transformedSubLocationData都会通过map重新生成新的对象数组。MUI Autocomplete默认通过对象引用来判断选项是否已选中，新生成的对象和selectedNames里的旧对象引用不同，导致组件无法识别已选中项，既不会高亮，也无法阻止重复选择。
2. 未显式配置isOptionEqualToValue属性，组件无法正确判断两个选项是否为同一个。

修复步骤 #

1. 用useMemo缓存转换后的选项数据 #

使用React的useMemo钩子，仅当依赖项变化时才重新生成transformedSubLocationData，保证选项对象的引用稳定：

import { useMemo } from 'react';

// ...

const transformedSubLocationData = useMemo(() => {
  if (!locationSubValue[formData.location.value]) return [];
  return locationSubValue[formData.location.value].map((label, index) => ({
    label,
    value: index.toString()
  }));
}, [locationSubValue, formData.location.value]);

2. 添加isOptionEqualToValue属性 #

明确告诉Autocomplete如何判断两个选项是否相等，这里用value字段作为唯一标识：

<Autocomplete
  multiple
  id="fixed-tags-demo"
  value={selectedNames}
  onChange={(event, newValue) => {
    setSelectedNames(newValue); // 无特殊需求可移除filter，newValue本身是合法选项数组
    changeHandleLocationErrorRemove(event);
  }}
  options={transformedSubLocationData}
  getOptionLabel={(option) => option.label}
  // 指定选项相等的判断逻辑
  isOptionEqualToValue={(option, value) => option.value === value.value}
  renderTags={(tagValue, getTagProps) =>
    tagValue.map((option, index) => (
      <Chip
        label={option.label}
        {...getTagProps({ index })}                      
      />                    
    ))                  
  }                
  style={{ width: 500 }}
  renderInput={(params) => (
    <TextField {...params} label={formData.location.value} placeholder={formData.location.value} />                  
  )}                
/>

3. 优化onChange的处理（可选） #

如果newValue不会出现空值/undefined，可直接移除newValue.filter((option) => option)，简化为setSelectedNames(newValue)，避免不必要的数组处理。

验证修复 #

完成上述修改后：

• 已选中的选项会在下拉列表中正确高亮
• 无法重复选择同一个选项
• 组件性能也会因为useMemo的缓存得到提升

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