Reactjs 在componentDidMount方法内的事件侦听器内设置状态

我有一个应用程序，我需要将用户的经度和纬度导出为道具/状态。我曾多次尝试在事件处理程序中设置状态，但我认为我的问题是无法将“this”正确绑定到函数，因此无法访问事件侦听器中的状态。我尝试在componentDidMount中的任何地方使用“bind（this）”，但即使使用它时没有出现错误，它似乎也无法完成任务。我设置了多个console.log来查看发生了什么

换句话说，我想在事件处理程序内设置状态-似乎无法执行。以下是地图组件的代码：

import React from 'react';



class GoogleMap extends React.Component{

 constructor(){
super();
this.state = {
  lat: '',
  lon: ''
}
}

componentDidMount(){
  var map, infoWindow;


  map = new window.google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 15
  });


  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      var marker = new window.google.maps.Marker({
        position: {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        },
        map: map,
        draggable:true,
        title: 'Hello World!'})

    //   infoWindow.setPosition(pos);
    //   infoWindow.setContent('Location found.');
    //   infoWindow.open(map);
      map.setCenter(pos);

              //marker listeners
      window.google.maps.event.addListener(marker, 'dragstart', function() {
          console.log('marker dotkniety');
          document.getElementById('test').innerHTML = '<p>Currently dragging 
marker...</p>';
      });


      window.google.maps.event.addListener(marker, 'dragend', function(e) {
        console.log('marker upuszczony');
        document.getElementById('test').innerHTML = '<p>Want to export: 
Current Lat: ' + e.latLng.lat().toFixed(3) + ' Current Lng: ' + 
e.latLng.lng().toFixed(3) + '</p>';
        console.log(this, 'this inside the event listener');

      //   this.setState(() => {
      //    return {lat: e.latLng.lat(),
      //    lon: e.latLng.lng()}
      //  })

        }.bind(this)
      );


    }, function() {
      handleLocationError(true, map.getCenter());
    });



  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, map.getCenter());
  }


function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support 
geolocation.');
  infoWindow.open(map);
}

console.log('DID MOUNT');
console.log(this);
console.log(this.state);
}


render(){

    return(

        <div>
            <div id='map' />
            <div id='test' />
        </div>
    )
}
}
export default GoogleMap 

从“React”导入React；
类GoogleMap扩展了React.Component{
构造函数（）{
超级（）；
此.state={
拉丁语：''，
lon:'
}
}
componentDidMount（）{
var映射，信息窗口；
map=newwindow.google.maps.map（document.getElementById（'map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：15
});
//试试HTML5地理定位。
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
var marker=new window.google.maps.marker({
职位：{
纬度：位置坐标纬度，
lng:position.coords.longitude
},
地图：地图，
真的，
标题：“你好，世界！”）
//信息窗口。设置位置（pos）；
//infoWindow.setContent（'找到位置'）；
//打开（地图）；
地图设置中心（pos）；
//标记侦听器
window.google.maps.event.addListener（标记'dragstart'，函数（）{
log（'marker dotkniety'）；
document.getElementById（'test'）。innerHTML='当前正在拖动
标记…
'；
});
window.google.maps.event.addListener（标记'dragend'，函数（e）{
console.log（'marker upuszczony'）；
document.getElementById（'test'）。innerHTML='要导出：
当前纬度：'+e.latLng.Lat（）.toFixed（3）+'当前纬度：'+
e、 latLng.lng（）.toFixed（3）+'
'；
log（这是“事件侦听器内部的消息”）；
//此.setState（（）=>{
//返回{lat:e.latLng.lat（），
//lon:e.latLng.lng（）}
//  })
}.绑定（此）
);
}，函数（）{
handleLocationError（true，map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，map.getCenter（））；
}
功能手柄位置错误（浏览器具有地理位置、信息窗口、pos）{
信息窗口。设置位置（pos）；
infoWindow.setContent（browserHasGeolocation？
“错误：地理位置服务失败。”：
'错误：您的浏览器不支持
地理定位’）；
打开（地图）；
}
log（'DID MOUNT'）；
console.log（this）；
console.log（this.state）；
}
render（）{
返回(
)
}
}
导出默认谷歌地图

您忘记了绑定构造函数中的函数：

constructor() {
  super()

  this.handleLocationError = this.handleLocationError.bind(this)

  this.state = { ... }
}

componentDidMount() {
  var map, infoWindow;

  map = new window.google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 15
  })

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }

      var marker = new window.google.maps.Marker({ ... })

      map.setCenter(pos);

      // marker listeners
      window.google.maps.event.addListener(marker, 'dragstart', () => {
        console.log('marker dotkniety');
        document.getElementById('test').innerHTML = '...';
      })

      window.google.maps.event.addListener(marker, 'dragend', (e) => {
        console.log('marker upuszczony')
        document.getElementById('test').innerHTML = '...'
        console.log('this inside the event listener')
      })
     }, () => this.handleLocationError(true, map.getCenter(), ??, map))
   } else {
     // Browser doesn't support Geolocation
     this.handleLocationError(false, map.getCenter(), ??, map)
  }

  console.log('DID MOUNT');
  console.log(this);
  console.log(this.state);
}

handleLocationError(browserHasGeolocation, infoWindow, pos, map) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map)

}

---

当我试图绑定它时，我得到了“TypeError:无法读取未定义的属性'bind'”。在这一点上，我完全不知所措，我已经更新了答案。请检查这是否有帮助。我不太确定如何将此函数移到componentDidMount之外而不引起问题。也不应该将this绑定到getCurrentPosition，因为侦听器就在那里？但是我也没有把这个绑定到那个方法上。实际上，出于性能原因，我建议将它从componentDidMount中拉出。更不用说，如果你在构造函数中绑定它，你就可以访问

this.state

，

this.props

和

this.setState（{…}）

。好吧，我试过了，但是当我把它拉到组件之外的时候，我得到的是“handleLocationError”没有定义，所以看起来我做不到

render() {
  ...
}