useRef не отслеживает выбранные элементы в выпадающем списке

Question

У меня есть динамические выпадающие списки c, и я использую useRef для отслеживания того, что было выбрано, чтобы следующий выпадающий список не отображал уже выбранные элементы. Однако когда я удаляю элемент, в предыдущих выпадающих списках снова отображаются все параметры.

Однако, когда я удаляю элемент, другие выпадающие списки не отслеживают все, что еще выбрано.

Например, здесь, если вы создали 3 элемента, выберите от 1 до 3, а затем удалите последний. Если вы вернетесь go к первому раскрывающемуся списку, вы увидите, что вариант 2 слева, даже если он уже выбран. https://codesandbox.io/s/actions-selector-t7nbk?file= / ObjectList.jsx

  const gSettings = useRef(globalSettings);
  const [object, setObject] = useState('user');
  const objectOptions = (
    objects.filter(i => !gSettings.current.map(i => i.object).includes(i)) || []
  ).map(i => ({ value: i, label: i }));

Answer 1

Вы тени ваша i переменная в этом выражении:

objects.filter(i => !gSettings.current.map(i => i.object).includes(i))
               ^                           ^

Используйте другое имя переменной в обратном вызове map, k, например:

objects.filter(i => !gSettings.current.map(k => k.object).includes(i))

Или вы можете переместить внутренний map выше:

const selectedOptions = gSettings.current.map(i=> i.object)
objects.filter(i => !selectedOptions.includes(i))

---

В качестве примечания, это поможет сделать имена переменных более явными.