Warum wird mein Status nicht auf die Variable lat gesetzt?

Question

let lon, lat; 
 
let weather; 
 
if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
    lat = position.coords.latitude; 
 
    lon = position.coords.longitude; 
 
console.log(typeof lat) 
 
}); 
 
} 
 
class Button extends React.Component{ 
 
state = {latt: lat} 
 
\t \t render(){ 
 
\t \t \t return(
 
\t \t <div> 
 
{this.state.latt} 
 
<h1>ss</h1> 
 
</div> 
 
\t \t \t 
 
)}} 
 

 
class Appp extends React.Component { 
 

 
\t render(){ 
 
\t \t return(
 
\t \t \t <Button /> 
 
\t \t)} 
 
\t } 
 
ReactDOM.render(<Appp />, mountNode)

what i did

Wenn ich die Variable console.log ich eine Nummer bekommen, aber warum kann ich es als ein Wert im Zustand verwenden. Selbst wenn man es in ein Array setzt, macht das keinen Unterschied.

Answer 1

sollte es sein:

let lat, lon, weather; 

class Calendar extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      lat: null, 
      lon: null 
     } 
     this.updateLatLon = this.updateLatLon.bind(this); 
    } 
    updateLatLon(){ 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition((position) => { 
       this.setState(() => { 
        return {lat: position.coords.latitude, lon: position.coords.longitude} 
       }); 
      }); 
     } 
    } 
    componentWillMount(){ 
     this.updateLatLon(); 
    } 
    render(){ 
     return (
      <div> 
       {this.state.lat} 
      </div> 
     ) 
    } 
} 

Answer 2

Sie den Zustand ändern, indem setState()

navigator.geolocation.getCurrentPosition(function(position) { 
    this.setState({ 
     lat: position.coords.latitude, 
     lon: position.coords.longitude 
    }); 
    console.log(typeof lat) 
});