は、ネイティブリアクト：国家も、シミュレータ上のリロード後に以前の状態を保持するようだ

Question

私はこのような何かを行うコードがあります（擬似コード）

class extends Component{ 
    constructor(){ 
     this.state={ 
     condition1 : false, 
     condition2 : false, 
     condition3 : false, 
     condition4 : false, 
     } 
     //set all 4 condition states to true once data loading has completed from the store 
    } 


    render(){ 

     return(
     if (this.state.condition1 && this.state.condition2 && this.state.condition3 && this.state.condition4) 
      Render Main component 
     else 
      Render loading screen 

    ); 

} 



} 

は基本的に私がいるかどうかをチェックするために使用されている4つの状態を持っているがデータは、メインコンポーネントをロードする前にロードされています。ストア（別のファイルから）がデータのロードを完了すると、イベントが発生し、4つの状態がtrueに設定され、メインコンポーネントがロードされます。再ロードボタンをGenymotionエミュレータから削除すると、4つの状態は真のままで、falseにリセットされず、アプリケーションは主なコンポーネントをロードしてクラッシュします（データはまだ準備されていません）再びComponentWillMountメソッドでメインアプリケーションがメインコンポーネントを読み込もうとする前に、状態がfalseに戻ってしまうことはありません。ライフサイクルのどのコンポーネントで、状態をfalseにリセットする必要がありますか？または、実際のデバイスでアプリをリロードするのは「非現実的」なので、私はこの問題を無視すべきですか？

Answer 1

ライフサイクルのどのコンポーネントで、状態を にリセットする必要がありますか？

レンダリング前に状態を更新するには、componentWillReceivePropsを使用することをおすすめします。あなたのユースケースに応じて、newPropsがthis.propsと異なるかどうかを確認する必要があるかもしれませんが、私は自分のプロジェクトでこれを行いました。

https://facebook.github.io/react/docs/component-specs.html

componentWillReceiveProps

コンポーネントが新しい小道具を受信して​​いるときに呼び出されます。このメソッドは、初期レンダリングのために呼び出される ではありません。

this.setState（）を使用して状態を更新して render（）を呼び出す前に、プロップトランジションに反応する機会としてこれを使用します。 古い小道具はthis.props経由でアクセスできます。 this.setState（） をこの関数内で呼び出しても、追加のレンダリングはトリガーされません。

Answer 2

私はネットワークフェッチ要求の数を減らすことでこの問題を回避することができました。同時に複数のネットワーク要求があると、その理由が不明な場合でも、不安定になる可能性があります。