有没有一种有效的方法来加载当前位置以响应状态？

Question

抱歉，如果这看起来像一个愚蠢的问题，但我坚持使用 navigator.geolocation JavaScript API.

我想加载当前用户位置以在组件加载时声明。

我的状态是

    state = {
     currentLatitude : '',
     currentLongitude : ''
    }

我的组件安装是：

componentDidMount() {
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log("Latitude is : ", position.coords.latitude);
        console.log("Longitude us : ", position.coords.longitude);
    });
  }

这会将纬度和经度记录到控制台，但是当我尝试将纬度设置为 state 时，出现错误“无法读取属性 setState of undefined”：

componentDidMount() {
    navigator.geolocation.getCurrentPosition(function(position) {
        this.setState({
            currentLatitude: position.coords.latitude, 
            currentLongitude: position.coords.longitude
        })
    });
}

我也试过了

   componentDidMount() {          
        this.setState({
            currentLatitude: navigator.geolocation.getCurrentPosition.coords.latitude, 
            currentLongitude: navigator.geolocation.getCurrentPosition.coords.longitude
        })
    }

但是我得到了同样的错误。

完整的 class 组件是：

  import React, { Component } from 'react'

class Location extends Component {

state = {

    currentLatitude : '',
    currentLongitude : ''

}

componentDidMount() {

    navigator.geolocation.getCurrentPosition(function(position) {
        console.log("Latitude is : ", position.coords.latitude);
        console.log("Longitude us : ", position.coords.longitude);
        console.log(position)
    });

}

handleChange = (e) => {
    localStorage.setItem([e.target.id], e.target.value)
    this.setState({
        [e.target.id]: e.target.value
    })
}

handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state)
}

render() {
    return (
        <div className="location">
            <p>{this.state.currentLongitude}</p>
            <p>{this.state.currentLatitude}</p>
        </div>
    )
}

}

导出默认位置

请协助如何将此加载到状态。

谢谢。

Answer 1

当您传递回调函数时，this 引用它最终被调用时所在的上下文。使用箭头函数来代替组件上下文：

navigator.geolocation.getCurrentPosition(position => {
    this.setState({
        currentLatitude: position.coords.latitude, 
        currentLongitude: position.coords.longitude
    })
});

有没有一种有效的方法来加载当前位置以响应状态？

Is there an efficient way to load current location to react state?

javascript

geolocation

reactjs