React应用无法从API读取数据，获取到undefined数组求助

核心问题：错误访问API返回字段 #

weatherapi的current.json接口返回的响应结构中没有results字段，你试图赋值request.data.results自然会得到undefined。该接口的返回结构顶层包含location和current两个核心对象，示例结构如下：

{
  "location": {
    "name": "London",
    "region": "City of London, Greater London",
    // ...其余位置信息
  },
  "current": {
    "temp_c": 16,
    "condition": {
      "text": "Partly cloudy"
    },
    // ...其余天气数据
  }
}

其他需要修正的细节 #

• 初始状态类型不匹配：你用useState([])初始化了数组，但API返回的是对象，应改为useState(null)或useState({})避免类型混乱。
• 缺少错误处理：异步请求未捕获异常，一旦API调用失败会导致程序崩溃。

修改后的Page.js代码 #

import axios from "../../axios"
import { fetchDataByCity } from "../../Requests";
import { useEffect, useState } from "react";

const Page = props => {
    // 改为匹配返回类型的初始状态
    const [data, setData] = useState(null);

    useEffect(() => {
        async function fetchData() {
            try {
                const request = await axios.get(fetchDataByCity("London"));
                // 可根据需求选择赋值完整响应，或仅提取需要的字段（如current）
                setData(request.data);
            } catch (error) {
                console.error("数据请求失败:", error);
            }
        }

        fetchData();
    }, []);

    // 打印前判断状态，避免初始null时的无效输出
    console.log(data);
    return (
        <div>
            {data ? (
                <div>
                    <h3>{data.location.name}</h3>
                    <p>当前温度：{data.current.temp_c}°C</p>
                    <p>天气状况：{data.current.condition.text}</p>
                </div>
            ) : (
                <p>加载中...</p>
            )}
        </div>
    );
}

export default Page;

验证建议 #

直接在浏览器地址栏访问请求URL（http://api.weatherapi.com/v1/current.json?key=你的密钥&q=London&aqi=no），确认返回结构与预期一致，同时检查API密钥是否有效。

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