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

Question

当用户单击按钮时，我正在尝试使用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变量嵌套在函数中。

我怎样才能把这些数据放到我的状态？

Answer 1

React 中的每个组件状态更新都应该使用setState(). 对于您的情况，您可以setState()在传入的回调函数中使用getCurrentPosition()。navigator.geolocation.getCurrentPosition(position => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; lat: position.coords.latitude,&nbsp; &nbsp; &nbsp; &nbsp; lng: position.coords.longitude&nbsp; &nbsp; });})我还建议您考虑使用React 挂钩进行状态（在您完成 React 的基础知识学习之后）

Answer 2

在 React 中，您持有组件状态中的信息。您可以像这样设置状态：this.setState({&nbsp; lon: longitude,&nbsp; lat: latitude})并从您的视图（渲染函数）或您可能需要的任何其他地方访问状态。