Question

我想在我的React组件中将ES6 Set与useState()和useEffect()一起使用。它与useState()一起很好用，但是当useEffect()依赖项更改时，不会触发Set。

这是相关的代码。 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放入依赖项列表中，您仍然需要使用setter useEffect来触发更改，从而影响selected。

我会尝试以下方法：

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

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

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

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

希望对您有帮助！

使用ES6设置为useEffect（）的依赖项。不影响变更

1 个答案: