React中没有自定义库的Google地图：无法读取属性setState of null

Posted 2021-03-27

我目前在没有库的React中使用谷歌地图。我一直得到错误（无法读取属性setState of null），我知道这与在函数内使用“this”有关。在这种特殊情况下，我对如何解决它一无所知。

方法

getGPS = () =>{
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      let start = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      this.setState({start: start})
    });
  } else {
    let start= {lat:"-34.603474", lng:"-58.381592"};
    this.setState({start: start})
  };
  this.calculateAndDisplayRoute()
}

地图组件

<Map
id="myNewMap"
float="right"
width= "50%"
options={{
center: {lat: this.state.currentMarker[0].getPosition().lat(), lng: this.state.currentMarker[0].getPosition().lng()},
zoom: 18,
disableDefaultUI: true,
}}
onMapLoad={map => {
this.newMap = map;
{this.getGPS()}
} 
}
/>

答案

function(position) {
      let start = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      this.setState({start: start})
    }

你是对的，这是this的范围。 javascript认为您在函数中引用了this。如果将函数更新为箭头函数，则使用封闭词法范围的this值，它将是您的组件。

navigator.geolocation.getCurrentPosition(position => {
      let start = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      this.setState({start: start})
    };