如何使用 Set 和 react 的 useState？

Question

我有一个数组，我必须从中添加/删除元素，我想我会使用 Set 来完成这个，因为它的 add has 和 –d54a3f8715be160843fbcb-5 和 delete 。

 const [tags, setTags] = React.useState(new Set())

如果我想添加一些东西到 tags ，我该如何使用 setTags 来做到这一点？或者我只是打电话 tags.add() ？

原文由 a person 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

A Set 根据定义是可变的，如果你仅仅调用 const newSet = set.add(0) React 不会触发新的渲染 — 因为之前和新之间的浅比较总是断言 true

您可以使用 spread 运算符在每次更新之间更改引用，但仍保持 Set 的所有行为

添加一个元素

const [state, setState] = useState(new Set())

const addFoo = foo =>{
    setState(previousState => new Set([...previousState, foo]))
}

您仍然可以使用 add 方法，因为它返回更新后的集合

const addFoo = foo =>{
    setState(prev => new Set(prev.add(foo)))
}

---

删除元素

Removing 有点棘手。你首先需要把它变成一个数组， filter 然后传播结果

const removeFoo = foo =>{
    setState(prev => new Set([...prev].filter(x => x !== foo)))
}

为了清楚起见

const removeFoo = foo =>{
    setState(prev =>{
        return prev.filter(x => x !== foo)
    })
}

原文由 Dupocas 发布，翻译遵循 CC BY-SA 4.0 许可协议