如何从嵌套函数中获取 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 => {

    this.setState({

        lat: position.coords.latitude,

        lng: position.coords.longitude

    });

})

我还建议您考虑使用React 挂钩进行状态（在您完成 React 的基础知识学习之后）

Answer 2

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

this.setState({

  lon: longitude,

  lat: latitude

})

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