componentDidMount, getCurrentPosition Verzögerung

Question

Ich benutze ein solches Muster Benutzer die aktuelle Position zu erhalten:

componentDidMount() { 
     let lat, lon; 
    navigator.geolocation.getCurrentPosition(function(location) { 
     lat = location.coords.latitude; 
     lon = location.coords.longitude; 
}); 
    setTimeout(() => { 
    this.setState({ 
     lat, 
     lon 
    }) 
    console.log(this.state.lon, this.state.lat); 
}, 1000); 
    } 

Es funktioniert tatsächlich sieht aber „lückenhaft“ wegen setTimeout. Das Kernproblem besteht darin, dass es einige Verzögerungen beim Abrufen von Standort- und Konsolenwürfen undefined ohne setTimeout gibt. Ich habe versucht, ein paar weitere Möglichkeiten, es zu beheben, aber alle gescheitert:

navigator.geolocation.getCurrentPosition(function(location) { 
    this.setState({ 
     lat: location.coords.latitude, 
     lon: location.coords.longitude 
    }) 
}).bind(this); 

und demütig let _this = this zum Beispiel. Bitte, gibt es einen weiseren Weg zu setState, basierend auf Geolocation?

Answer 1

Wie in den Kommentaren erwähnt, können Sie entweder bewegen Sie binden leicht oder einen Pfeil Funktion:

componentDidMount() { 
    navigator.geolocation.getCurrentPosition(function (location) { 
     this.setState({ 
     lat: location.coords.latitude, 
     lon: location.coords.longitude 
     }) 
    }.bind(this)); 

    // OR 
    navigator.geolocation.getCurrentPosition(location => { 
     this.setState({ 
     lat: location.coords.latitude, 
     lon: location.coords.longitude 
     }) 
    }); 
}