Question

我的React组件中有几个功能。

我想从Google Maps Geocoder函数中调用logResults（）函数，但是告诉他＆＃34; TypeError：this.log不是函数＆＃34;

  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上下文。您可以使用箭头功能解决此问题（如果您可以使用es6）：

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);
})

或者，如果你不能这样做，请使用封闭传递你的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}, 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) )

无论你通过bind（）传递给函数，在该函数内都将成为this。在上面的例子中，我们从父函数发送您心爱的this，成为子函数中的this。 bind（）创建＆＃34; Family Bonding＆＃34; ：）

React，从另一个函数中调用类函数

3 个答案: