如何在MUI Autocomplete中实现可修改的唯一选项功能

需求：已选中的选项不再显示在其他Autocomplete下拉菜单中，但当前实现会将当前组件自身选中的选项也从下拉列表中移除，导致无法取消错误选择。

问题原因 #

当前studentOptions函数的过滤逻辑会排除所有在formData.createClass中任何一个studentList里的选项，包括当前组件自己选中的选项。这就导致当前组件的下拉菜单里看不到已选的选项，无法进行取消操作。

解决方案 #

修改studentOptions中的过滤条件，在检查已选选项时，跳过当前组件对应的createClass项，只排除其他组件选中的选项；同时将当前组件已选的选项重新加入下拉列表，确保可以回退修改。

修改后的studentOptions代码 #

const studentOptions = useCallback((index) => {
  const currentClassUsers = currentOrganization.find((item) => item.id === formData.createClass[index]?.value)?.users;
  if (!currentClassUsers) return [];

  const cleanCurrentClass = _.filter(currentClassUsers, (value) => {
    // 排除全局选中列表中的选项
    const notInSelected = !_.some(selectedOptions, { value });
    // 排除其他班级已选的选项，跳过当前班级
    const notInOtherClass = !_.some(formData.createClass, (classItem, classIndex) => {
      if (classIndex === index) return false;
      return _.some(classItem.studentList, { value });
    });
    return notInSelected && notInOtherClass;
  });

  const optionsList = cleanCurrentClass.map((item) => ({ value: item, name: item }));
  // 将当前班级已选的选项加回下拉列表，允许取消选择
  const currentSelected = formData.createClass[index]?.studentList || [];
  // 合并并去重，避免重复选项
  const mergedOptions = [...currentSelected, ...optionsList].filter((option, pos, arr) => {
    return arr.findIndex(o => o.value === option.value) === pos;
  });

  return mergedOptions;
}, [currentOrganization, formData, selectedOptions]);

补充优化：修正isOptionEqualToValue逻辑 #

当前的选项匹配逻辑存在错误，会导致选择判断不准确，建议修改为：

isOptionEqualToValue={(option, value) => option.value === value.value}

代码说明 #

1. 过滤逻辑调整：遍历formData.createClass时跳过当前组件对应的项，只排除其他组件的已选选项，保证当前组件的下拉菜单不受自身已选内容影响。
2. 合并已选选项：将当前组件的已选选项重新加入下拉列表，确保用户能看到并取消错误选择。
3. 选项匹配修正：通过value字段准确匹配选项，避免选择逻辑异常。

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