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

React useState钩子如何与可变对象一起使用

1 个答案: