使用 Openweather Api 處理 react fetch

Question

我正在用 React 構建一個簡單的應用程序（我正在學習）。 我不明白如何正確地呈現數據對象，因為我無法編寫day.key來訪問我想要打印的信息。 你能幫助我嗎？

這是我正在使用的代碼：獲取請求：

import { useEffect, useState } from "react";
import Day from './Day';

const DayList = () => {
    const [data, setData] = useState();

    useEffect(() => {
        const lat = 45.68;
        const long = 9.23;
        const apikey = "apikey";

        fetch("https://api.openweathermap.org/data/2.5/onecall?lat="+lat+"&lon="+long+"&exclude=current,minutely,hourly&appid="+apikey)
        .then((res) => res.json())
        .then((data) => {
            setData(data.daily)
        })
    }, [])

    return (
        <div className="day-list">
            { data && <Day data = { data } /> }
        </div>
    );
}
 
export default DayList;

這是我不知道如何訪問數據的渲染組件

const Day = ( {data} ) => {
    return (
        <div>
            {Object.keys(data).map((day) => (
                <div className="day">{ ??? }</div>
            ))}
        </div>
    );
}
 
export default Day;

可以在此處找到示例響應；

控制台響應屏幕謝謝

Answer 1

當您將 data.daily 設置為數據（組件中的狀態變量）時，您需要使用data.map來訪問值，因為data.daily是一個數組。

const Day = ({ data }) => {
    return (
        <div>
            {data.map((day) => (
                <p>Temp: {day.temp}</p>
                <p>Feels Like: {day.feels_like}</p>
            ))}
        </div>
    );
}
 
export default Day;

Answer 2

您從代碼中獲得的數據是數組而不是對象，因此結果應該與此類似 -

const Day = ( {data} ) => {
    return (
        <div>
            {data.map((day) => (
                <div className="day">{day.sunrise}</div>
                <div className="day">{day.sunset}</div>
                <div className="day">{day.temp.min}</div>
                <div className="day">{day.temp.max}</div>
                .....
            ))}
        </div>
    );
}

export default Day;