javascript - 在 componentDidMount() 中获取地理位置并发送 Ajax 请求

Question

我正在尝试调用天气 API，其中包含使用 navigator.geolocation.getCurrentPosition() 从用户计算机接收到的坐标

我的问题是，鉴于一切都在异步运行，我无法找出正确的方法来执行此操作。然后，我想我想出了一个使用 componentDidMount() 的不错的解决方法，但不幸的是它没有用。

这是我的 codepen (没有 API key )

代码如下:

state = {
        data: "Please wait while you're weather is loading...",
    }
    componentDidMount() {
        this.state.hasOwnProperty('uri') ?
            fetch(this.state.uri).then((res) => res.json())
            .then((data) => this.setState({
                data: {
                    tempString: data.current_observation.temperature_string,
                    realTemp: data.current_observation.feelslike_string,
                    skyImg: data.current_observation.icon_url.substring(0, 4) + 's' + data.current_observation.icon_url.substring(4),
                    location: data.current_observation.display_location.full,
                    temp_f: data.current_observation.temp_f,
                }
            }))
            .catch((err) => console.log(err.message))
        : navigator.geolocation.getCurrentPosition((pos) => {
            this.setState({
                uri: "https://api.wunderground.com/api/{API GOES HERE}/conditions/q/" + pos.coords.latitude.toString() + "," + pos.coords.longitude.toString() + ".json"
            })
            console.log(this.state.uri)
        })
    }

我对一切运行的理解如下:

1. 初始组件渲染
2. componentDidMount() 被调用并查看 if 语句
3. 找不到 URI 属性，因此启动 getCurrentPosition() 调用，使用新的 URI 属性设置状态(据我所知，this.setState 应该触发重新渲染，然后...)
4. componentDidMount() 再次运行，但这次找到了 URI 属性
5. 由于某些未知原因，fetch() 没有运行

虽然我不确定，但我最好的猜测是虽然现在有 URI 属性，但到新的 componentDidMount() 运行时，程序仍在确定将其设置为什么。但我可能完全错了。我还可以创建一个无限循环，其中 componentDidMount() 永远不会看到 URI 属性并不断重新呈现。

Answer 1

正如@brub 所说:无论 ui 更新多少，componentDidMount 都不会运行多次。我最终使用 componentDidUpdate 作为解决方案。现在是代码:

    state = {
        data: "Please wait while you're weather is loading...",
    }
    componentDidMount() {
        navigator.geolocation.getCurrentPosition((pos) => {
            this.setState({
                uri: "https://api.wunderground.com/api/{API GOES HERE}/conditions/q/" + pos.coords.latitude.toString() + "," + pos.coords.longitude.toString() + ".json"
            })
        })
    }
    componentDidUpdate() {
        fetch(this.state.uri).then((res) => res.json())
        .then((data) => this.setState({
            data: {
                tempString: data.current_observation.temperature_string,
                realTemp: data.current_observation.feelslike_string,
                skyImg: data.current_observation.icon_url.substring(0, 4) + 's' + data.current_observation.icon_url.substring(4),
                location: data.current_observation.display_location.full,
                temp_f: data.current_observation.temp_f,
            }
        }))
            .catch((err) => console.log(err.message))
    }