Question

制作我的第一个React应用。我想根据用户的位置更新Google Maps API。我收到错误“这是未定义的”。我了解使用.bind（this）并包装在箭头函数中，但是我认为这种情况有些不同，因为我是在嵌套函数中设置状态：

constructor(props) {
    super(props);
    
    this.state = {zip: null, lat: 40.5304 , lng: -100.6534 , zoom: 3.8 };

    this.updateCurrentPosition= this.updateCurrentPosition.bind(this);
  }
  
  //...
  
updateCurrentPosition = () => {
    navigator.geolocation.getCurrentPosition(success, error);
    
      function success(pos) {
        this.setState(`{lat: ${pos.coords.latitude}, lng: ${pos.coords.longitude}, zoom: ${3.8}`)  
      }
    
      function error(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
      }; 
  }

  ops = () => { 
    return {
      center: { lat: this.state.lat, lng: this.state.lng },
      zoom: this.state.zoom
    }
  };

Answer 1

箭头函数自动将函数绑定到父类。如果未绑定函数或未绑定箭头函数，则“ this”将仅引用函数本身，即使它是嵌套的。您的成功函数（以及失败函数）也未绑定到父类，因为您既没有绑定也没有将其定义为箭头函数。

Answer 2

问题在于this在Javascript的严格模式下未定义。您可以参考本段以了解更多http://2ality.com/2014/05/this.html

对于您的特定问题，当您定义success和error时，这两个功能并不与父级绑定。

以下通过将功能定义为箭头功能的修改将解决您的问题。

const success = (pos) => {
    this.setState(`{lat: ${pos.coords.latitude}, lng: ${pos.coords.longitude}, zoom: ${3.8}`)
}

const error = (err) => {
    console.warn(`ERROR(${err.code}): ${err.message}`);
};

Answer 3

因此，我改为直接将函数作为参数传递给getCurrentPosition方法，它似乎可以正常工作。

updateCurrentPosition = () => {
    navigator.geolocation.getCurrentPosition( (pos) => {
        this.setState({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 1 }) 
      },
      (err) => {
        console.warn(`ERROR(${err.code}): ${err.message}`)
      }
    )
  }

反应this.SetState未定义-嵌套函数

3 个答案: