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

【问题标题】：Is there an efficient way to load current location to react state?有没有一种有效的方法来加载当前位置以响应状态？
【发布时间】：2021-08-16 11:31:08
【问题描述】：

抱歉，这似乎是一个愚蠢的问题，但我坚持使用 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);
    });
  }

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

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
        })
    }

但我得到了同样的错误。

完整的类组件是：

  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>
    )
}

}

导出默认位置

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

谢谢。

【问题讨论】：

我从来没有过多地处理过类组件，但我知道类组件应该始终使用 props 调用基本构造函数。并尝试答案中建议的箭头功能。

标签： javascript reactjs geolocation

【解决方案1】：

当你传递一个回调函数时，this 引用它最终被调用时所处的上下文。使用箭头函数来使用组件上下文：

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

【讨论】：