React天气应用中JavaScript fetch API结果不一致问题求助

问题描述 #

使用React开发简易天气应用，通过fetch API从OpenWeather获取数据，通过data.name是否为"Globe"（请求纬度0、经度0时的结果）来切换加载图标和Weather组件。偶尔出现Weather组件长时间不渲染的情况，怀疑是fetch请求未返回结果。相关代码如下：

const [lat, setLat] = useState(0);
const [long, setLong] = useState(0);
const [data, setData] = useState(weatherDataObj);

const refresh = () => {
  window.location.reload();
};


useEffect(() => {
    const fetchData = async () => {
      navigator.geolocation.getCurrentPosition((position) => {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });

      console.log(lat, long);

      await fetch(
        `${api.base}/weather?lat=${lat}&lon=${long}&units=metric&APPID=${api.key}`
      )
        .then((res) => res.json())
        .then((result) => {
          setData(result);
        })
        .then(() => console.log("finished"))
        .catch((err) => console.log(err.message));
    };
    fetchData();
  }, [lat, long]);

  return (
    <>
      <Stack spacing={2}>
        <Button variant="contained" onClick={refresh}>
          Refresh
        </Button>
        {data.name != "Globe" ? (
          <>
            <Weather weatherData={data} />
          </>
        ) : (
          <>
            <HourglassBottom></HourglassBottom>
          </>
        )}
      </Stack>
    </>
  );

问题分析 #

你的猜测不完全准确，核心问题出在地理位置获取的异步处理逻辑错误和缺少关键错误处理：

• navigator.geolocation.getCurrentPosition是异步API，代码中未等待它完成就执行fetch，导致第一次请求用的是初始值lat=0、long=0，返回Globe数据，显示加载图标。
• 当地理位置获取成功后，更新lat/long会触发useEffect重新执行fetchData，但此时又会再次调用getCurrentPosition，造成重复获取位置和重复发起请求，导致流程混乱。
• 未处理地理位置获取失败的情况（比如用户拒绝授权、浏览器无法定位），此时lat/long永远为0，fetch持续请求无效坐标，返回Globe数据，看起来像是fetch未返回结果。

解决方案 #

1. 规范异步流程，先获取位置再发起请求 #

将navigator.geolocation.getCurrentPosition包装为Promise，确保拿到有效坐标后再调用fetch：

const fetchData = async () => {
  try {
    // 把地理位置API转为Promise，等待获取成功
    const position = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });

    const { latitude, longitude } = position.coords;
    // 直接使用获取到的坐标发起请求，无需更新lat/long状态
    const response = await fetch(
      `${api.base}/weather?lat=${latitude}&lon=${longitude}&units=metric&APPID=${api.key}`
    );

    // 检查响应状态
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const result = await response.json();
    setData(result);
    console.log("finished");
  } catch (err) {
    console.error(err.message);
    alert(`获取数据失败：${err.message}`);
    // 可额外设置错误状态，在页面展示错误信息
    // setError(err.message);
  }
};

2. 调整useEffect依赖，避免重复触发 #

移除对lat/long的依赖，改为空数组，确保组件挂载时仅执行一次请求：

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

3. 优化渲染逻辑，使用独立状态控制加载/错误 #

建议单独维护loading和error状态，比依赖data.name更可靠：

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// 在fetchData的try块末尾添加
setLoading(false);

// 在catch块中添加
setError(err.message);
setLoading(false);

// 渲染部分
return (
  <>
    <Stack spacing={2}>
      <Button variant="contained" onClick={refresh}>
        Refresh
      </Button>
      {loading ? (
        <HourglassBottom />
      ) : error ? (
        <div>获取数据失败：{error}</div>
      ) : (
        <Weather weatherData={data} />
      )}
    </Stack>
  </>
);

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