Javascript 将ES6设置为useEffect（）的依赖项。更改时未调用的效果

我想在我的React组件中使用ES6

Set

，使用

useState（）

和

useffect（）

。它与

useState（）

配合使用效果很好，但是

Set

依赖项更改时不会触发

useffect（）

这是相关代码<代码>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>
  )
}

const Filter=（{onChange}）=>{
const[selected，setSelected]=useState（new Set（））
console.log（“选定集”，选定）
useffect（（）=>{
控制台日志（“效果”）
onChange（Array.from（选定））
}，[selected，onChange]）
常量handleClick=（主题）=>{
已选择。添加（主题）
}
返回(
)
}

我知道我可以用

数组

来实现这一点，但如果能够利用

集合

的有用属性，而不必每次都创建助手函数，那就太好了

---

有什么想法吗？

我想问题在于您试图直接修改所选的状态

。即使您正在使用

Set

在依赖项列表中选择

后，您仍然需要使用setter
setSelected
来触发对影响
useffect
的更改

我会尝试以下方法：

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

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

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

通过使用
newset（selected）
您正在使用构造函数从
selected
创建
Set
的浅拷贝。然后，您可以将新项目添加到新创建的
集合
。最后，您需要使用
setSelected
来更新
selected
值，该值将触发
useffect
，正如您之前所预期的那样

我希望这有帮助
 @eivindml发生了这种情况，很高兴解决了您的问题。使用set比仅使用array更详细，尽管set具有我所追求的“仅插入唯一”属性。因为有了布景，我不得不1。在添加（）之前创建集合的副本，2。比较新的和旧的集合，这样我们就不会在它们仍然相同时更新状态，3。在效果中将集合转换为数组。使用数组时，我只需执行2：P@eivindml我认为这仍然是一个很好的问题，尽管它似乎比您提到的使用数组需要更多的工作。