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

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'
/>;

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

Appned the value in array by removing the selected option or adding new options

reactjs

use-state