使用 ES6 Set 作为 useEffect() 的依赖项。更改未调用效果

Question

我想在我的 React 组件中使用 ES6 Set，以及 useState() 和 useEffect()。它适用于 useState()，但在更改 Set 依赖项时不会触发 useEffect()。

这是相关代码。 onChange() 已被记忆。

const Filter = ({ onChange }) => {
  const [selected, setSelected] = useState(new Set())

  console.log("Selected Set", selected)

  useEffect(() => {
    console.log("effect")
    onChange(Array.from(selected))
  }, [selected, onChange])

  const handleClick = (topic) => {
    selected.add(topic)
  }

  return (
    <div className="filter">

    </div>
  )
}

我知道我可以使用 Array 来做到这一点，但如果能够利用 Set 的有用属性而无需每次都创建辅助函数，那就太好了。

有什么想法吗？

Answer 1

我认为问题出在您试图直接修改状态selected。即使您正在使用Set，您仍然需要使用设置器setSelected 来触发更改，一旦您在依赖项列表中有selected，就会影响useEffect。

我会尝试以下方法：

useEffect(() => {
  console.log('effect');

  // your actions ...
}, [selected]);

const handleClick = (topic) => {
  const newSelected = new Set(selected);
  newSelected.add(topic);
  setSelected(newSelected);
}

通过使用new Set(selected)，您正在使用构造函数从selected 制作Set 的浅表副本。然后您可以将新项目添加到新创建的Set。最后，您需要使用 setSelected 更新 selected 值，这将触发您之前预期的 useEffect。

希望对你有帮助！