シナリオ
React Native アプリには、タブ ナビゲーターがあります。各タブには<Checkbox>
、状態変数に従ってチェック/チェック解除されるコンポーネントがあり、チェックボックスをクリックしてチェック/チェック解除の値を切り替えることができます。これらのチェックボックス コンポーネントは次のようになります。
<CheckBox
checked={this.state.a}
onPress={() => this.setState({a: !this.state.a})}
/>
各タブは独自の状態を持つ独自のコンポーネントであり、それぞれに状態変数が含まれていますa
。それぞれ<Checkbox>
が「チェック済み」、つまりthis.state.a
isで始まりますtrue
。
異常な行動
タブ A、B、および C があり、this.state.a
最初はすべてtrue
(したがって、それぞれのチェックボックスがオンになっている) とします。タブAのチェックボックスをクリックするthis.state.a
と、Aがなりfalse
、期待どおりチェックボックスがオフになります。しかし、タブ B に移動すると、チェックボックスもオフになります。in B は、何らかの理由this.state.a
でまだです。true
ファイルの 1 つを保存すると、画面がホット リロードthis.state.a
され、B が になりfalse
ます。
私の質問は次のとおりです。
あるタブでチェックボックスを切り替えると、他のタブで切り替えたチェックボックスの値が影響を受けるのはなぜですか?
this.state.a
に切り替わらない場合に、B のチェックボックスがチェックされている状態からチェックされていない状態にするにはどうすればよいfalse
ですか?ページをホットリロードすると
this.state.a
in B が に切り替わるのはなぜですか?false