React Hooks+async/await调用WeatherAPI失败求助，结构化天气应用开发

你的代码存在几个关键问题，导致应用无法正常运行，逐一梳理如下：

1. 初始渲染时的空值报错 #

组件挂载初期data的初始值为undefined，直接访问data.location.name这类嵌套属性会触发Cannot read properties of undefined错误，导致组件崩溃。这会让你误以为是API请求失败，但实际上可能请求已经成功，只是渲染环节出了问题。

2. async/await与.then混用且缺失错误处理 #

你在async函数里混用了await和.then，不仅代码冗余，而且没有任何错误捕获逻辑。如果API请求出现问题（比如网络故障、API Key无效、跨域拦截），你无法在控制台看到任何错误信息，根本没法定位问题。

3. 可能的跨域拦截问题 #

你使用的是http协议的API地址，在现代浏览器的本地开发环境中（比如Create React App启动的服务），会因为CORS策略被拦截。WeatherAPI本身支持https协议，应该改用HTTPS地址。

修复后的完整代码 #

import { useState, useEffect } from "react";

function App() {
  // 给data设置初始结构，避免初始渲染时访问嵌套属性报错
  const [data, setData] = useState({ location: {}, current: {} });

  const fetchData = async () => {
    try {
      // 改用HTTPS协议避免跨域
      const response = await fetch(
        `https://api.weatherapi.com/v1/forecast.json?key=1d172d3904e246849d3183628230802&q=Stockholm&days=6&aqi=no&alerts=no`
      );
      
      // 检查响应状态，非200-299范围则抛出错误
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }

      const result = await response.json();
      setData(result);
    } catch (error) {
      // 捕获并打印错误，方便定位问题
      console.error('获取天气数据失败:', error);
    }
  };

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

  // 使用可选链操作符(?.)，确保数据未加载时不会报错
  return (
    <>
      <h3>{data.location?.name}</h3>
      <p>{data.current?.temp_c}°C</p>
      <p>{data.location?.localtime}</p>
    </>
  );
}

export default App;

额外提示 #

• 永远不要把API Key硬编码在前端代码中，后续可以通过后端代理转发请求来保护Key
• 可以添加加载状态（比如const [loading, setLoading] = useState(true)），在数据加载完成前显示加载提示，提升用户体验

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