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

Posted 2023-02-23

【中文标题】有没有一种有效的方法来加载当前位置以响应状态？

【英文标题】：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 调用基本构造函数。并尝试答案中建议的箭头功能。

【参考方案1】：

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

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