React useState钩子如何与可变对象一起工作

Question

假设我的组件有一段状态，它是一组选定的ID。 Javascript有一个Set类型，所以我试试这个：

let [selectedIDs, setSelectedIDs] = useState(new Set());

Javascript Set本身就是可变的，所以我很困惑。

function toggleSelectedID(id) {
    let set = selectedIDs;
    if (set.has(id)) { set.delete(id) }
    else { set.add(id) }
    // ???
    setSelectedIDs(set);
}

如果Set对象是不可变的，我会用添加或删除的元素创建一个新的Set，然后将新的Set传递给setSelectedIDs，在那时改变状态。

但是有了可变的Set，如果我们回到???线会发生什么？ React会处于糟糕的状态吗，因为我“进入”其状态并且在没有正式用setSelectedIDs正式告知它的情况下对其进行了改变？

Answer 1

在您的示例中，setSelectedIDs没有更新应用程序state。

那是因为你设置了相同的引用，你应该复制一下：

setSelectedIDs(new Set(set));

codesandbox的例子。

---

如果我们回到???会怎么样？线

什么都不会发生，你刚刚改变了函数中的一个变量，你可以多次这样做。

当您希望React-App注意到更改时，您应该调用一个函数来更新状态（setSelectedIDs()），您的应用程序将被重新呈现。

请参阅Using State Correctly