在 react.js 中的 componentDidMount() 中执行提取之前，如何通过 navigator.geolocation 获取用户的位置？

Question

我已经尝试了多种不同的方法，但还是被难住了。刚开始使用承诺并在 React 中进行 api 调用。这是我目前拥有的：

import React, { Component } from 'react'
import Column from './Column'
import { CardGroup } from 'reactstrap';

let api = "https://fcc-weather-api.glitch.me/api/current?";


class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            isLoaded: false,
            items: {},
        }

    this.fetchWeather = this.fetchWeather.bind(this)
}

fetchWeather(apiStr) {
    fetch(apiStr)
        .then(res => res.json())
        .then(

            (result) => {

                console.log(result)
                this.setState({
                    isLoaded: true,
                    items: result.main
                });
                console.log(this.state);
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.
            (error) => {
                this.setState({
                    isLoaded: true,
                    error
                });
            }
        )

}

componentDidMount() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            api += `lat=${position.coords.latitude}&lon=${position.coords.longitude}`;     
        })
        this.fetchWeather(api);
    }
}

现在在获取当前位置之前正在执行 api 调用。我尝试了各种方法，但在执行提取之前无法访问当前位置。处理这个问题的最佳方法是什么？对此的任何见解将不胜感激。任何问题，让我know.Thanks。

Answer 1

由于获取位置是通过回调完成的，因此您必须在回调中获取

navigator.geolocation.getCurrentPosition((position) => {
  api += `lat=${position.coords.latitude}&lon=${position.coords.longitude}`;
  this.fetchWeather(api);
});

Answer 2

使用钩子usePosition()和功能组件怎么样？

在这种情况下，检测到浏览器位置后获取数据的任务可能如下所示：

import React, { useEffect } from 'react';
import { usePosition } from 'use-position';

export const Weather = () => {
  const { latitude, longitude, error } = usePosition();

  useEffect(() => {
    if (latitude && longitude && !error) {
      // Fetch weather data here.
    }
  }, []);

  return <div>Render weather data here</div>;
};

当然不要忘记使用 npm:

安装自定义挂钩

npm i use-position --save

或使用yarn:

yarn add use-position

在 react.js 中的 componentDidMount() 中执行提取之前，如何通过 navigator.geolocation 获取用户的位置？

How do I get user's location via navigator.geolocation before my fetch executes in componentDidMount() in react.js?

geolocation

fetch

reactjs

es6-promise

react-lifecycle