ReactコンポーネントのAJAXリクエストをループする

Question

これは私の問題です。 ReactアプリケーションでAJAX呼び出し（Axiosを使用）を介して公開APIからデータ（緯度/経度）を取得しようとしています。

ポストコードの入力アドレス&のポストコード入力は、その値がAJAX fetchCoordinates（）リクエスト関数のパラメータとして渡され、データが返されると、最初の結果の座標で緯度/経度の状態が更新されます。

ユーザーは住所と郵便番号の入力を更新できます。その結果、アプリは座標の状態を更新する必要があります。再び、私は、AJAXリクエストがループ停止することはできません戻って座標を取得すると、私はできるだけ早くしかし、戻って座標を取得しても、画面上にそれらをレンダリングすることができ、実際に

componentDidUpdate(prevState) { 
     fetchCoordinates(this.state.address, this.state.postcode) 
      .then((data) => { 
       if (typeof(data) === "object" && data.features.length) { 
        this.setState(function() { 
         return { 
          latitude: data.features[0].geometry.coordinates[1], 
          longitude: data.features[0].geometry.coordinates[0] 
         } 
        }); 
       } 
      }) 
    } 

：

ここで問題のあるメソッドのコードですもう一度...

私はリアクションの初心者ですが、疑わしい動作に見えます！

誰かがアイデアを持っていたら、それは優しいものです。 Thxは事前に助けを求めています。

Silvère

Answer 1

this.setStateは、前述のように

this.setState({ 
    latitude: data.features[0].geometry.coordinates[1], 
    longitude: data.features[0].geometry.coordinates[0] 
}) 

を読むべき機能

this.setState(function() { // remove the function piece here 
         return { 
          latitude: data.features[0].geometry.coordinates[1], 
          longitude: data.features[0].geometry.coordinates[0] 
         } 
        }) 

を呼び出すべきではありません - あなたはComponentDidMountまたはComponentWillMountにこのコードを入れなければならない - ないComponentDidUpdate