React组件需保存文件才触发地理位置API请求，求自动加载解决方案

开发的React Location组件通过调用OpenWeatherMap API获取用户所在城市，遇到以下问题：

• 应用首次加载时，无法显示用户城市信息：
  
• 按下CTRL+S保存代码文件后，API请求生效，正常显示城市：
  

问题原因 #

navigator.geolocation.getCurrentPosition是异步API，组件首次执行useEffect时，代码会先发起地理位置请求，但不会等待其完成就直接用latitude和longitude的初始值（0）拼接API地址并发送请求，导致API返回错误数据。而保存代码触发热更新时，组件重新渲染，此时之前的地理位置请求已经完成，latitude和longitude已经存储了真实的经纬度，因此API请求能正确返回城市信息。

解决方案 #

将API请求逻辑放在getCurrentPosition的成功回调函数内部，确保只有在获取到真实的经纬度后才发起API请求；同时完善加载状态和错误提示的展示逻辑：

import axios from "axios";
import { useEffect, useState } from "react"

export function Location(){
    const API_endpoint = `https://api.openweathermap.org/data/2.5/weather?`
    const API_key = `e3b1d84b18bc5ef312403e0caf94b698`

    const [cityName, setCityName] = useState<string>('')
    const [isFetching,setIsFetching] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null)
    

    useEffect(() => {
        // 先获取地理位置
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                // 获取到经纬度后再发起API请求
                const finalApiEndPoint = `${API_endpoint}lat=${latitude}&lon=${longitude}&exclude=hourly,daily&appid=${API_key}`
                
                axios.get(finalApiEndPoint)
                .then((response) =>{
                    setCityName(response.data.name)
                })
                .catch(err => {
                    setError('获取城市信息失败')
                })
                .finally(() => {
                    setIsFetching(false)
                })
            },
            (err) => {
                // 处理地理位置获取失败的情况
                setError('无法获取您的地理位置')
                setIsFetching(false)
            }
        )
    }, [])
    

    if (isFetching) {
        return <div><h1>正在获取您的位置...</h1></div>
    }

    if (error) {
        return <div><h1>{error}</h1></div>
    }

    return(
        <div>
            <h1>Your Location: {cityName}</h1>
        </div>
    )
}

关键修改点 #

• 将API请求移至getCurrentPosition的成功回调内，确保使用真实的经纬度参数
• 添加地理位置获取失败的错误处理逻辑
• 完善组件的加载状态和错误状态展示，提升用户体验
• 移除了不再需要的latitude和longitude状态变量（直接在回调中使用即可）

内容的提问来源于stack exchange，提问作者Felipe Godoy