React天气API获取异常：位置请求仅偶尔生效，刷新后失效求助

核心问题点 #

• 异步状态更新导致URL错误：setLat/setLong是异步操作，在定位回调里直接用lat/long的state值时，拿到的还是更新前的旧数据，生成的API URL参数完全错误。
• 异步执行顺序混乱：useEffect空数组只执行一次，getWeater会在定位完成前就发起请求，这时候URL还没正确生成，请求自然失败。
• 语法冗余且无错误处理：同时混用await和then，代码逻辑混乱；没处理定位失败、API请求失败的情况，出问题也没法排查。

修正后的代码 #

import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';

const Weather = () => {
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState(null);

  // 直接接收经纬度发起天气请求
  const fetchWeather = async (lat, lon) => {
    try {
      const response = await axios.get(
        `http://api.weatherapi.com/v1/current.json?key=6e6263afb84f44279f731543222510&q=${lat},${lon}`
      );
      setWeather(response.data);
      setError(null);
    } catch (err) {
      setError('获取天气数据失败，请稍后重试');
      console.error('请求错误:', err);
    }
  };

  const getLocation = () => {
    if (!navigator.geolocation) {
      setError('您的浏览器不支持地理定位');
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (position) => {
        // 用定位返回的实时经纬度直接调用请求
        const { latitude, longitude } = position.coords;
        fetchWeather(latitude, longitude);
      },
      (err) => {
        setError(`定位失败: ${err.message}`);
        console.error('定位错误:', err);
      }
    );
  };

  useEffect(() => {
    getLocation();
  }, []);

  // 处理加载、错误状态
  if (error) return <div>{error}</div>;
  if (!weather) return <div>加载中...</div>;

  return (
    <div>
      <h2>{weather.location.name} 实时天气</h2>
      <p>温度: {weather.current.temp_c}°C</p>
      <p>天气状况: {weather.current.condition.text}</p>
    </div>
  );
};

export default Weather;

关键改动说明 #

1. 移除冗余state：删掉lat/long/url三个不必要的状态，直接用定位返回的经纬度拼接请求URL，彻底避免异步状态更新的延迟问题。
2. 调整执行顺序：把天气请求放到定位成功的回调里，确保只有拿到有效经纬度后才发起API请求，解决了请求时机不对的问题。
3. 完善错误处理：新增error状态处理定位失败、请求失败的场景，同时在控制台打印错误信息方便调试。
4. 优化异步语法：用try/catch替代then/catch，让异步代码逻辑更清晰。
5. 补充UI状态：添加加载中和错误提示，提升用户体验。

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