非同期機能のsetStateはネイティブに反応します

Question

私はアプリケーションのNavigatorコンポーネントを使用して、サーバーからデータを取得するためにfetchを使用してルートのコンテンツをレンダリングします。私が持っている

componentDidMount() { 
    fetch(url).then((res) => { 
     this.setState({data: res}); 
    }); 
} 

問題は私がアンマウントコンポーネントを更新しようとしているエラーを得続けるようにと呼ばれる部品がもはやマウントされたときに、時には閉鎖火災をフェッチしないということです。これは、ルート間をすばやく移動する場合に発生します。コンポーネントが取り外された場合にクロージャの実行を終了する方法はありますか？

Answer 1

コンポーネントの取り付け時にはfetchリクエストを開始し、Promiseとして保存してください。

この場合、PromiseはCancelablePromiseとなり、コンポーネントをアンマウントすると約束が取り消されます。

HereCancelablePromiseの作成方法を読むことができます。

Answer 2

状態を設定する前に、コンポーネントがマウントされているかどうかを確認する必要があります。

componentDidMount() { 
    this.isMounted = true; 
    fetch(url).then((res) => { 
     if(this.isMounted) { 
      this.setState({this.data: res}); 
     } 
    }); 
} 

componentWillUnmount() { 
    this.isMounted = false; 
}