useRef 不跟踪下拉列表中的选定项目

Question

我有动态下拉菜单，我使用 useRef 来跟踪已选择的内容，以便下一个下拉菜单不会显示已选择的项目。但是，当我删除一个项目时，以前的下拉菜单会再次显示所有选项。

但是，当我删除一个项目时，其他下拉菜单不会跟踪仍然选中的所有内容。

例如这里，如果你创建 3 个项目，选择 1 到 3，然后删除最后一个。如果您返回第一个下拉菜单，您会看到选项 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

你是shadowing你的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))

---

附带说明一下，这将有助于使变量名称更加明确。