为什么我的状态未设置为变量lat？

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} render(){ return( <div> {this.state.latt} <h1>ss</h1> </div> )}} class Appp extends React.Component { render(){ return( <Button /> )} } ReactDOM.render(<Appp />, mountNode) 

what i did

When I console.log the variable I get a number but why cant I use it as a value in state. Even putting it inside an array makes no difference.

Answer 1

it should be this:

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

You change the state by using setState()

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