为什么我无法从API（React应用程序）读取数据

Question

我正在学习React，遇到了一个我自己无法解决的问题。

我试图从 API 获取数据，但相反，我得到一个未定义的数组。

我创建了axios.js

import axios from "axios";

const instance = axios.create({
    baseURL: "http://api.weatherapi.com/v1/",
});

export default instance;

Requests.js

const API_KEY = '7be85e2711194910b29123355231904';

export const fetchDataByCity = (city) => {
    return `current.json?key=${API_KEY}&q=${city}&aqi=no`;
}

Page.js

import axios from "../../axios"
import { fetchDataByCity } from "../../Requests";
import { useEffect, useState } from "react";
const Page = props => {
    const [data, setData] = useState([]);
    useEffect(() => {
        async function fetchData() {
            let request = [];
            request = await axios.get(fetchDataByCity("London"));

            setData(request.data.results);
            return request;
        }

        fetchData();
    }, []);

    console.log(data);
    return (
        <div >
            hey
        </div>
    );
}

export default Page;

当我尝试在控制台中显示数据时，我得到了未定义的信息

Answer 1

这是

undefined

，因为您尝试从响应中访问

results

键，并且响应中没有返回键。响应是一个对象，您期望从响应中得到数组。

useEffect(() => {
        async function fetchData() {
            ....
            <!-- no key `results` exists in the response -->
            setData(request.data.results); 
            ....
        }

        fetchData();
    }, []);

这是回复请检查。

解决方法可以像初始化对象中的数据状态并在响应后设置

const [data, setData] = useState({}); // object

useEffect(() => {
        async function fetchData() {
            ....
            <!-- remove `results` key  -->
            setData(request.data); 
            ....
        }

        fetchData();
    }, []);