如何从我的嵌套函数中获取 Geolocation API 坐标并进入 React 状态？

Posted 2023-02-23

【中文标题】如何从我的嵌套函数中获取 Geolocation API 坐标并进入 React 状态？

【英文标题】：How do I get Geolocation API co-ordinates out of my nested function and into React state?

【发布时间】：2019-10-31 23:33:04

【问题描述】：

当用户单击按钮时，我正在尝试使用Geolocation API 获取用户的位置：

<button onClick=this.setNewLatLong()>"Use my location"</button>;

我可以使用以下代码访问纬度/经度坐标：

setNewLatLong = () =>  
 navigator.geolocation.getCurrentPosition(displayLocationInfo);

  function displayLocationInfo(position) 
      const longitude = position.coords.longitude;
      const latitude = position.coords.latitude;

      console.log(`long: $longitude | lat: $latitude`);
  

但我无法将数据放入我的状态，因为 latitude 和 longitude 变量在函数中嵌套得太多了。

如何将这些数据导入我的状态？

【参考方案1】：

React 中的每个组件状态更新都应该使用setState() 完成。 对于您的情况，您可以在传递给getCurrentPosition() 的回调函数中使用setState()。

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

我还建议考虑使用React hooks 来表示状态（在您学习完 React 的基础知识之后）

【参考方案2】：

在 React 中，您保留组件状态中的信息。您可以像这样设置状态：

this.setState(
  lon: longitude,
  lat: latitude
)

并从您的视图（渲染函数）或您可能需要的任何其他地方访问状态。

【讨论】：

当我使用navigator.geolocation.getCurrentPosition(position => position.coords.longitude) 作为它返回“未定义”的状态时，你知道这是为什么吗？

您需要权限才能访问职位。如果没有，设置的值将是未定义的