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

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 会处于糟糕的状态吗，因为我 "reached into" 它的状态并在没有正式告诉它 setSelectedIDs?

的情况下改变了它

Answer 1

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

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

setSelectedIDs(new Set(set));

codesandbox 示例。

What would happen if we returned at the ??? line

什么都不会发生，你只是在你的函数中改变了一个变量，你想做多少次都可以。

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

参考Using State Correctly

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

How does React useState hook work with mutable objects

reactjs

react-hooks