React调用Openweather API获取天气数据后如何正确渲染取值

核心问题原因 #

你从OpenWeather One Call API获取到的daily字段本身就是逐日数据构成的数组，你在Day组件中使用Object.keys(data)遍历数组时，拿到的day是数组的索引值，不是单天的天气数据对象，所以无法直接读取字段。

修复后的代码 #

1. 可保留父组件原有逻辑，建议给state加初始默认值避免空值风险： #

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((res) => {
            setData(res.daily)
        })
    }, [])

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

2. 修正Day组件的遍历逻辑，直接遍历数组即可读取字段： #

const Day = ({data}) => {
    return (
        <div>
            {/* 直接遍历data数组，item就是单天的完整天气数据 */}
            {data.map((dayItem, index) => (
                <div className="day" key={index}>
                    {/* 示例：读取常用字段，可根据需求自行扩展 */}
                    <p>日期：{new Date(dayItem.dt * 1000).toLocaleDateString()}</p>
                    <p>白天气温：{Math.round(dayItem.temp.day - 273.15)}℃</p>
                    <p>天气状况：{dayItem.weather[0].description}</p>
                    <p>湿度：{dayItem.humidity}%</p>
                </div>
            ))}
        </div>
    );
}
 
export default Day;

补充说明 #

• 遍历列表时必须添加key属性，避免React抛出渲染警告，如果你的数据里有唯一标识可以用唯一值代替索引作为key
• OpenWeather返回的温度默认单位是开尔文，减去273.15即可转换为摄氏度，返回的时间戳是秒级，转JS Date对象时需要乘以1000转成毫秒级。

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