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

Question

Let's say my component has a piece of state that is a set of selected IDs. Javascript has a Set type, so I try this:

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

The Javascript Set is itself mutable, so I'm confused.

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

If the Set objects where immutable, I would create a new Set with the added or removed element, and pass that new Set to setSelectedIDs , changing the state at that point.

But with the mutable Set , what would happen if we returned at the ??? line? Would React be in a bad state, because I "reached into" its state and mutated it without officially telling it about it with setSelectedIDs ?

Answer 1

In your example, setSelectedIDs not updating application state .

That's because you set the same reference, you should make a copy:

setSelectedIDs(new Set(set));

codesandbox example.

---

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

Nothing would happen, you just changed a variable in your function, you can do it as many times you like.

When you want your React-App to notice the change, you should then call a function the updates the state ( setSelectedIDs() ) and your app will be rerendered.

Refer to Using State Correctly