React useState hook 如何处理可变对象

IT技术 reactjs react-hooks
2021-04-26 21:50:18

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

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

JavascriptSet本身是可变的,所以我很困惑。

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

如果Set对象不可变,我将Set使用添加或删除的元素创建一个新元素,并将该新元素传递SetsetSelectedIDs,更改此时的状态。

但是对于 mutable Set,如果我们???在线路上返回会发生什么React 是否会处于糟糕的状态,因为我“进入”了它的状态并在没有正式告诉它的情况下对其进行了变异setSelectedIDs

1个回答

在您的示例中,setSelectedIDs不更新 application state

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

setSelectedIDs(new Set(set));

代码沙盒示例。


如果我们回到??? 线

什么都不会发生,您只是在函数中更改了一个变量,您可以根据需要多次更改。

当您希望您的 React-App 注意到更改时,您应该调用一个函数来更新状态 ( setSelectedIDs()) 并且您的应用程序将被重新渲染。

请参阅正确使用状态