ReactJS小道具で新しいデータを取得する

Question

序文として、私はまだReactを初めて使っています。

私が持っているのは、HTMLテーブルをレンダリングするためにデータを取得するコンポーネントです。だから私はfetchData()（ブラウザのfetch() APIを使用する）をcomponentWillMount()から呼び出す。これにはストア変更のリスナーもある。これはすべて正常に機能し、データを取得してレンダリングすることができます。

今すぐ次の手順。私は、コンポーネントの小道具が更新されたときに新しいデータを取得できるようにしたい。しかし、私はそれを行うための正しい方法が何であるか正確にはわかりません。だから私は、3つの部分質問

1. を持って新しい小道具に私fetchData()を行うための適切な場所はもちろん、小道具は、変更をしたことを検証した後、componentWillReceiveProps()になりますか？
2. 私のAPIはかなり遅いので、フェッチがまだ実行されている間は、新しい小道具が入ってくる可能性があります。古いフェッチをキャンセルして新しいフェッチを開始することは可能ですか、または少なくとも元の結果を無視して新しいフェッチの結果を待つロジックを実装することは可能ですか？
3. 上記の質問に関連して、私のアクションの状態（または他の場所）にisLoadingブール値のようなものを持っているだけで、いつでもフェッチが確実に実行されるようにする方法がありますか？

Answer 1

はい、componentWillReceivePropsはそれを行うのに適切な場所です。ポイント2と3について

：

「1が稼働してフェッチ」タスクをキャンセルし、維持するためのアイデアが不十分であると思われます。私は実装があなたのアプリの効率を設計によって制限するので、この種のソリューションはどのシステムでも使われるべきだとは思わない。

それは古いフェッチし、新しいものを開始するか、少なくとも、元の結果を無視して、新しいフェッチから結果を待つためのロジックを実装をキャンセルすることは可能ですか？

「新しいフェッチ」レスポンスが「古いフェッチ」レスポンスを上書きしないようにしましょう。

本当に古い応答を表示したくない場合は、単にすべてのfetchData呼び出しのカウンタを使用して実装することができます。あなたはこの方法でそれを実装することができます。

var ApiClient = { 
    processing: 0, 
    fetchData: function(){ 
     processing++ 
     return yourLibForHTTPCall.get('http://endpoint').then(function (response)){ 
      processing-- 
      return response 
     } 
    }, 
    isIdle: function(){ 
     return processing == 0 
    } 
} 

、あなたが実際に電話をかける場所：

apiClient.fetchData(function(response){ 
    if(apiClient.isIdle()){ 
     this.setState({ 
     }) 
    } 
} 

私はyourLibForHTTPCall.getはあなたのケースでPromiseを返します願っています。