React多选下拉框选满3项后隐藏选项功能实现求助

原代码核心问题 #

1. 状态管理冗余混乱：maxOptions的初始值与更新逻辑完全错误，无法正确判断选中上限
2. 事件参数处理错误：onSelect中对选中项的取值逻辑完全偏离组件实际返回值
3. 可选选项控制逻辑失效：判断options是否显示的条件逻辑错误，无法触发隐藏效果

修改后的完整代码 #

import { useState } from "react";
import Multiselect from "multiselect-react-dropdown";
import "./styles.css";

export default function App() {
  const options = [
    { key: "Apple", email: "apple@test.com", id: 1 },
    { key: "Orange", email: "oranges@test.com", id: 2 },
    { key: "Mango", email: "mango@test.com", id: 3 },
    { key: "Grapes", email: "grapes@test.com", id: 4 }
  ];

  // 仅维护已选中选项状态，无需额外冗余状态
  const [selectedOptions, setSelectedOptions] = useState([]);
  const MAX_SELECT_COUNT = 3;

  const handleSelect = (selectedItem) => {
    setSelectedOptions(prev => [...prev, selectedItem]);
  };

  const handleRemove = (removedItem) => {
    // 通过id精准删除，避免引用类型比较的潜在问题
    setSelectedOptions(prev => prev.filter(item => item.id !== removedItem.id));
  };

  // 预处理选项显示值，避免直接修改原数组
  const formattedOptions = options.map(option => ({
    ...option,
    displayValue: `${option.key}\t${option.email}`
  }));

  // 动态计算可选选项：达到上限则返回空数组，否则返回未选中的选项
  const availableOptions = selectedOptions.length >= MAX_SELECT_COUNT 
    ? [] 
    : formattedOptions.filter(opt => !selectedOptions.some(selected => selected.id === opt.id));

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Multiselect
        onSelect={handleSelect}
        onRemove={handleRemove}
        options={availableOptions}
        selectedValues={selectedOptions} // 必须绑定已选状态，保证组件状态同步
        displayValue="displayValue"
        showCheckbox={true}
        emptyRecordMsg="Maximum fruits selected !"
      />
    </div>
  );
}

关键改动说明 #

• 简化状态逻辑：删除冗余的maxOptions和option状态，仅用selectedOptions维护已选项，逻辑更清晰
• 修复事件处理：直接使用组件返回的选中/移除项对象，避免错误的索引取值逻辑
• 动态控制可选选项：当已选数量达到3时，自动将可选选项设为空数组；取消选中后数量减少，自动恢复显示未选中项
• 绑定selectedValues：这是原代码遗漏的核心属性，必须绑定已选状态才能让组件正确渲染已选内容，保证操作与状态同步
• 优化数据处理：用map替代forEach修改原数组，避免污染原始数据，也可通过useMemo包裹进一步优化渲染性能

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