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

Сценарий

В моем приложении React Native у меня есть навигатор вкладок. На каждой вкладке у меня есть компонент <Checkbox>, который отмечен/не отмечен в соответствии с переменной состояния, и вы можете переключать отмеченное/не отмеченное значение, щелкнув флажок. Эти компоненты 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, когда я перезагружаю страницу?


react-native reactjs javascript react-native-tabnavigator tabnavigator
person gkeenley    schedule 13.06.2019    source источник
comment
Вы используете одну переменную состояния для 3 флажков? мне непонятно   -  person Fakebounce    schedule 13.06.2019
comment
@hardworker Нет, я использую разные переменные состояния на каждом экране. Однако они называются «a» на каждом экране.   -  person gkeenley    schedule 13.06.2019
comment
Вы пробовали называть их по-другому? Может быть проблема   -  person Fakebounce    schedule 13.06.2019
comment
@hardworker На самом деле я понял это; обновление моего исходного вопроса с решением. Спасибо, что изучили это для меня.   -  person gkeenley    schedule 13.06.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

person Naim Mustafa    schedule 13.06.2019

arrow_upward
0
arrow_downward

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

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

person gkeenley    schedule 13.06.2019
comment
Мы не сможем вам помочь, если вы упростите. Пожалуйста, опубликуйте свой полный код в следующий раз - person Fakebounce; 14.06.2019