Как хук React useState работает с изменяемыми объектами

Question

Допустим, у моего компонента есть часть состояния, представляющая собой набор выбранных идентификаторов.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-приложение заметило изменение, вам следует вызвать функцию, обновляющую состояние (setSelectedIDs()), и ваше приложение будет перерисовано.

См. Правильное использование состояния