使用multiselect-react-dropdown时选项增删后数组正确更新问题

现有代码的核心问题 #

• 函数式组件中没有使用React状态管理选中值：用普通var声明的specializations不会触发组件重渲染，修改后数据和视图无法同步
• 移除逻辑完全不生效：Array.filter()方法只会返回新数组，不会修改原数组，同时过滤条件写反，现有写法保留了要删除的项，过滤掉了要保留的项
• 新增逻辑有重复添加风险：直接push未做去重判断，重复选中同一个选项会导致数组出现重复值

正确实现代码 #

1. 引入状态钩子并声明选中状态 #

import { useState } from 'react';

// 组件内部声明选中状态
const [specializations, setSpecializations] = useState([]);

2. 修正选中/移除处理逻辑 #

// 选中选项逻辑
const onSelectSpecialization = (event, value) => {
  // 去重判断，避免重复添加同一个选项
  const isAlreadySelected = specializations.some(item => item.name === value.name);
  if (!isAlreadySelected) {
    setSpecializations(prevState => [...prevState, value]);
  }
};

// 移除选项逻辑
const onRemoveSpecialization = (event, value) => {
  // 过滤掉要移除的选项，更新状态
  setSpecializations(prevState => prevState.filter(item => item.name !== value.name));
};

3. 可选：修正组件调用的属性类型问题 #

现有组件调用中closeOnSelect、id属性传的是字符串，可修正为正确类型：

<Multiselect
  options={objectArray}
  selectionLimit={5}
  onSelect={onSelectSpecialization}
  onRemove={onRemoveSpecialization}
  style={{ height: 'auto' }}
  closeOnSelect={false}
  emptyRecordMsg='No specialization found'
  placeholder='Select upto 5 Specialization'
  displayValue='name'
/>

修改后specializations状态会自动和多选组件的选中值完全同步，新增/移除操作都会实时更新数组内容。

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