通过删除选定的选项或添加新选项来附加数组中的值

Question

我有很多这样的选项

const objectArray = [
  { name: 'Option 1', cat: 'Group 1' },
  { name: 'Option 2', cat: 'Group 1' },
  { name: 'Option 3', cat: 'Group 1' },
  { name: 'Option 4', cat: 'Group 2' },
  { name: 'Option 5', cat: 'Group 2' },
  { name: 'Option 6', cat: 'Group 2' },
  { name: 'Option 7', cat: 'Group 2' },
];

我的组件是一个函数式组件，我曾经这样使用useState

var specializations = [];
const onSelectSpecialization = (event, value) => {
  specializations.push(value);
};
const onremoveSpecialization = (event, value) => {
  specializations.filter(
    (specializations) => specializations.name === value.name
  );
};

我使用的 Multiselect 模块是 multiselect-react-dropdown

<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'
  id='true'
/>;

我想要最终的数组，其中只有选定的值出现，如果我从列表中删除它们作为屏幕截图中的共享，则不应该存在任何值

see here for referenence

Answer 1

您没有以正确的方式使用 useState 挂钩。
尝试像这样更改您的代码：

const objectArray = [
  { name: 'Option 1', cat: 'Group 1' },
  { name: 'Option 2', cat: 'Group 1' },
  { name: 'Option 3', cat: 'Group 1' },
  { name: 'Option 4', cat: 'Group 2' },
  { name: 'Option 5', cat: 'Group 2' },
  { name: 'Option 6', cat: 'Group 2' },
  { name: 'Option 7', cat: 'Group 2' },
];

const [specializations, setSpecializations] = useState(objectArray);

const onSelectSpecialization = (event, value) => {
    setSpecializations(oldSpecializations => [ ...oldSpecializations, value])
};
const onremoveSpecialization = (event, value) => {
  const filteredSpecializations = specializations.filter(
    (spec) => spec.name === value.name
  );
  setSpecializations(filteredSpecializations)
};

正如您现在所看到的，它使用useState 挂钩来更新specializations 数组。

另外，将您的 MultiSelect 选项更改为 specializations：

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