React、別の関数内からクラス関数を呼び出す

Question

My React Componentには、2つの関数があります。

私はGoogleマップジオコーダ関数内からlogResults（）関数を呼び出すしたいのですが、聞いています「TypeError例外を：this.logは関数ではありません」

getLatLong(address){ 
    const google = window.google 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     let lat; let long; 
     if (status == google.maps.GeocoderStatus.OK) { 
     lat = results[0].geometry.location.lat(); 
     long = results[0].geometry.location.lng(); 
     } 
     this.logResults(lat, long); 
    }) 
    } 

    logResults(lat, long){ 
    console.log(lat + "" + long) 
    } 

私は愚かな何かをやっている知っていますここでそれを把握することはできません。どんな助けもありがとう。

Answer 1

コンテキストをバインドするのを忘れました。すべての矢印以外の機能には、bind(this)が必要です。

getLatLong(address){ 
    const google = window.google 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     let lat; let long; 
     if (status == google.maps.GeocoderStatus.OK) { 
     lat = results[0].geometry.location.lat(); 
     long = results[0].geometry.location.lng(); 
     } 
     this.logResults(lat, long); 
    }.bind(this)) 
    } 

    logResults(lat, long){ 
    console.log(lat + "" + long) 
    } 

OR

ES6

getLatLong(address){ 
    const google = window.google 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, (results, status) => { 
     let lat; let long; 
     if (status == google.maps.GeocoderStatus.OK) { 
     lat = results[0].geometry.location.lat(); 
     long = results[0].geometry.location.lng(); 
     } 
     this.logResults(lat, long); 
    }) 
    } 

    logResults(lat, long){ 
    console.log(lat + "" + long) 
    } 

Answer 2

問題がfunctionキーワードで定義されたコールバック関数を使用すると、新しいthisコンテキストを紹介することです。

let self = this; 
geocoder.geocode({ 'address': address}, function(results, status) { 
    let lat; let long; 
    if (status == google.maps.GeocoderStatus.OK) { 
    lat = results[0].geometry.location.lat(); 
    long = results[0].geometry.location.lng(); 
    } 
    self.logResults(lat, long); 
}) 

Answer 3

thisです：あなたはそれに、クロージャを使用して、あなたのthisを渡すことができない場合

geocoder.geocode({ 'address': address}, (results, status) => { 
    let lat; let long; 
    if (status == google.maps.GeocoderStatus.OK) { 
    lat = results[0].geometry.location.lat(); 
    long = results[0].geometry.location.lng(); 
    } 
    this.logResults(lat, long); 
}) 

をまたは：あなたは（あなたがES6を使用することができる場合）、矢印の機能を使用することで、この問題を解決することができます内部の無名関数を参照してください。 thisがメインオブジェクトを参照するには、それをあなたの無名関数にバインドする必要があります。このような何か：

geocoder.geocode({ 'address': address}, function(results, status) { 
     let lat; let long; 
     if (status == google.maps.GeocoderStatus.OK) { 
     lat = results[0].geometry.location.lat(); 
     long = results[0].geometry.location.lng(); 
     } 
     this.logResults(lat, long); 
    }.bind(this)) 

バインドを経由して関数に渡すものは何でも（）は、その関数内thisになります。上記のケースでは、あなたの最愛の人を親機能のthisに送信し、子機能でthisになります。 bind（）は "Family Bonding"を作成します:)