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

Question

I have an app where I need longitutde and latitude of user to be exported as props / state. I tried setting state numerous times inside the event handlerer but I think my problem is that I cant properly bind 'this' to the function, therefore I cant access the state inside the event listener. I tried using "bind(this)" virtually everywhere inside the componentDidMount but even when I used it without getting errors it doesnt seem to get the job done. I set up multiple console.logs to see whats going on.

In other words I want to setState inside the event handlerer - cant seem to do it. Here is the code for the map compononent:

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 

Answer 1

You forgot to bind the function inside the constructor:

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)

}

render() {
  ...
}