React Native: почему переменные состояния обновляются только при горячей перезагрузке?

Question

Сценарий

В моем приложении React Native есть навигатор по вкладкам. В каждой вкладке у меня есть компонент <Checkbox>, который отмечен / не отмечен в соответствии с переменной состояния, и вы можете переключать проверенное / непроверенное значение, установив флажок. Эти компоненты флажка выглядят так:

<CheckBox
  checked={this.state.a}
  onPress={() => this.setState({a: !this.state.a})}
/>

Каждая из вкладок является собственным компонентом со своим собственным состоянием, каждое из которых содержит переменную состояния a. Каждый <Checkbox> начинается «проверено», то есть this.state.a равно true.

Необычное поведение

Скажем, у нас есть вкладки A, B и C, все с this.state.a изначально true (и поэтому каждый из их флажков отмечен). Если я нажимаю флажок на вкладке A, this.state.a в A становится false, и флажок снимается, как и ожидалось. НО, когда я перехожу на вкладку B, флажок там также не отмечен. this.state.a в B по-прежнему true по некоторым причинам. Если я сохраню один из моих файлов, экран будет перезагружен, и this.state.a в B теперь станет false.

Мои вопросы:

1) Почему переключение флажка на одной вкладке влияет на переключаемое значение флажка на других вкладках?

2) Как установить флажок в B из отмеченного в непроверенный, если this.state.a не переключается в false?

3) Почему this.state.a в B переключается на false, когда я перезагружаю страницу?

Любое понимание будет оценено. Пожалуйста, дайте мне знать, если вам нужно увидеть больше кода или чего-либо еще.

Спасибо!

Answer 1

** ОБНОВЛЕНИЕ: РЕШЕНИЕ: **

Код, который я предоставил выше, был упрощением реального проекта (поскольку проект включает проприетарный код). По сути, this.state.a на самом деле является сложным объектом, который имеет несколько уровней глубины, и this.state.a на каждом экране инициализируется как this.setState({a: {...obj}}). Я думал, что выражение obj как {...obj} с оператором распространения будет копировать obj в this.state.a независимо на каждом экране, но, поскольку obj имеет глубину в несколько слоев, this.state.a для всех экранов в конечном итоге ссылаются тот же объект (obj). Решение вместо this.setState({a: {...obj}}), сделайте this.setState({a: JSON.parse(JSON.stringify(obj))}), потому что это действительно глубокий клон (до тех пор, пока порядок или свойства в obj не имеют значения).

Answer 2

по моему опыту горячая перезагрузка в реакции-нативной не надежна.Здорово, если у тебя просто меняется стильВ вашем случае, поскольку горячая перезагрузка рассчитана на скорость, она частично обновляется в зависимости от ваших изменений.Хотя это делает элемент b ложным, но не обновляет состояние компонентов.В этом случае ручная перезагрузка будет гораздо надежнее