使用ES6 Set作为useEffect()的依赖项.未调用对更改的影响

Question

我想在React组件中使用ES6 Set以及useState()和useEffect()。它与useState()配合使用效果很好，但当Set依赖关系更改时，不会触发useEffect()。

这是相关代码。CCD_ 7被存储。

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，正如您之前预期的那样。

我希望这能有所帮助！