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

Question

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

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

我可以使用以下代码访问 lat/long 坐标：

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 变量在函数中嵌套太多。

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

Answer 1

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

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

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

Answer 2

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

的回调函数中使用 setState()

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

我还建议研究使用 React hooks 作为状态（在您完成 React 的基础知识学习之后）

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

How do I get Geolocation API co-ordinates out of my nested function and into React state?

javascript

api

geolocation

reactjs