javascript - 如何在 native react 中从此 map 对象中删除所有其他 id？

Question

我有一个函数，它从数组中接收一个项目 ID，并将其映射到设置选定状态以显示我已单击该项目。

const onSelect = React.useCallback(
        id => {
            const newSelected = new Map(selected);
            newSelected.set(id, !selected.get(id));
            setSelected(newSelected);
        },
        [selected],
    );

这是我的状态:

const [selected, setSelected] = useState(new Map());

我只想同时选择 1 个项目，因此如果我单击一个项目，则其他项目的状态必须设置为 false。

Answer 1

当您克隆selected时，如果键等于id，则映射它并生成带有切换值的新条目，如果不等于false :

const onSelect = React.useCallback(
  id => {
      const newSelected = new Map(selected.map(([key, value]) => [key, key === id ? !value : false]));
      setSelected(newSelected);
  },
  [selected],
);

另外，在这种情况下useCallback几乎没有效果。由于 selected 经常更改，因此 useCallback 无法使用已内存的函数，并且会生成一个新函数。要解决这个问题，请将函数传递给 useState，并从依赖项数组中删除 selected。

const onSelect = React.useCallback(
  id => setSelected(sel => new Map(sel.map(([key, value]) => [key, key === id ? !value : false])),
  []
);