如何从我的嵌套 function 中获取地理定位 API 坐标并进入 React state？

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}`);
  }
}

但是我无法将数据输入到我的 state 中，因为latitude和longitude变量在函数中嵌套得太多了。

如何将这些数据输入到我的 state 中？

Answer 1

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

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

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

Answer 2

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

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

我还建议考虑对 state 使用React 钩子（在您学习完 React 的基础知识之后）