オブジェクトが定義されていないのはなぜですか？私はいくつかの場所を取得しようとしています

Question

は私がcomponentWillMount（）の段階でそれを呼び出すと、この構造を移入しようと、この機能に

getLocation(){ 
    $.ajax({ 
     url:"//freegeoip.net/json/?callback=?", 
     dataType:'json', 
     success:function (data) { 
      this.setState({ 
       coordinates:data 
      },function() { 
       console.log(this.state); 
      }) 
     }.bind(this), 
     error:function (xhr,status,err) { 
      console.log(err); 
     } 
    }) 
} 

を調整します。

しかし

this.state = { 
    restaurantsByLocations:{}, 
    coordinates:{} 
} 

、私はそれが渡されません

getRestaurantsByLocation(lat,longi){ 
/**Some code here **/ 

} 

に渡してみてください。 Console.log（）を実行すると、オブジェクトが設定されます。しかし、console.log（JSON.stringify（this.state.coordinates））を実行すると、オブジェクトが実際に空であることが示されます。

は、これは私のcomponentWillMount（）である

componentWillMount(){ 

this.getLocation(); 
this.getRestaurantsByLocation(this.state.coordinates.latitude,this.state.coordinates.longitude) 


} 

Answer 1

setStateコールバックでgetRestaurantsByLocation関数を呼び出す必要があります。こうすることで、メソッドとは異なり、関数が呼び出されたときに必要な情報を確実に取得できます。

getLocation(){ 
    $.ajax({ 
     url:"//freegeoip.net/json/?callback=?", 
     dataType:'json', 
     success:function (data) { 
      this.setState({ 
       coordinates:data 
      },function() { 
       this.getRestaurantsByLocation(data.latitude,data.longitude) 
      }) 
     }.bind(this), 
     error:function (xhr,status,err) { 
      console.log(err); 
     } 
    }) 
} 

Answer 2

私が間違っている可能性がありますが、あなたはあなたのAJAX機能でthis.stateを使用しているとき、「これは」あなたのページやAJAX呼び出しがあるのでしょうか？あなたのgetLocation（）関数の中で、私は、あなたのページのためのリファレンスとしてそれを使用するVAR var _this = this;

を作成します

：

_this.setState({ 
    coordinates:data 
},function() { 
    console.log(_this.state); 
}) 

Answer 3

this AJAX呼び出し内では、理由のコンポーネントを参照していませんスコープ。以下試してください：

getLocation(){ 
    var that = this; 
    $.ajax({ 
     url:"//freegeoip.net/json/?callback=?", 
     dataType:'json', 
     success:function (data) { 
      that.setState({ 
       coordinates:data 
      },function() { 
       console.log(this.state); 
      }) 
     }.bind(this), 
     error:function (xhr,status,err) { 
      console.log(err); 
     } 
    }) 
} 

そうすることによって、あなたが効果的にAJAX内successコールバックが参照できるコンポーネントコンテキストの閉鎖を作成しました。今はsetStateに問題なく対応できるはずです。

最後に、Reactを使用して、使用しているバージョンに応じてコンテキストをバインドする必要があります。私は典型的には、例えば、私のコンストラクタでそれを行う：それはgetRestaurantsByLocationコールへ移動する前、それが終了するのを

constructor(props) { 
    this.getLocation = this.getLocation.bind(this); 
    this.state = {coordinates: xyz}; 
} 

Answer 4

getLocationが非同期で、JavaScriptは待機しません。

function getLocation(onLocationAvailable) { 
    $.ajax({ 
     url: '/my/endpoint/', 
     success: function(data) { 
      onLocationAvailable(data.longitude, data.latitude); 
     } 
    }); 
} 

次に、このようなgetLocationを呼び出すことがいえ完了しています一度あなたが発射するコールバックとしてgetRestaurantsByLocationを渡すことができ

、このような何か... ...

getLocation(getRestaurantsByLocation); 

これはことを意味しますgetRestaurantsByLocationは、データがサーバーから戻ってくると呼び出されます。コールバックを行いたい場合は、latとlongを格納しておくことができますが、明示的に必要なデータを渡すことが明確になっていると思います。