reactjs - 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 是否会处于糟糕的状态，因为我“进入”了它的状态并改变了它，而没有正式告诉它 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