如何解决调用Open-Meteo API时的Uncaught TypeError: Cannot read 'time'错误？

错误原因 #

刷新页面时组件重新挂载，API请求还未完成，此时myData是初始的空数组[]，尝试访问myData.daily.time[0]时，myData.daily会返回undefined，进而触发Cannot read properties of undefined (reading 'time')错误。首次加载可能因请求完成较快或缓存原因未暴露问题，但刷新时请求重新发起，渲染逻辑先执行就会触发报错。

解决方案 #

1. 修正初始状态 #

接口返回的是对象类型数据，初始状态应设为null或空对象{}，而非空数组[]：

const [myData, setMyData] = useState(null)

2. 添加空值保护 #

在访问嵌套属性时，通过以下两种方式避免报错：

方式一：使用可选链操作符

通过?.在属性不存在时自动返回undefined，不会触发错误：

<Card time={myData?.daily?.time[0]} />

方式二：条件渲染

确保数据存在后再渲染组件：

{myData && myData.daily && <Card time={myData.daily.time[0]} />}

修改后的完整代码 #

import { useEffect, useState } from "react"
import Button from "./Button";
import Card from "./Card";
import Card2 from "./Card2";
import axios from "axios";

const Infopage = () => {
  // 修正初始状态为null
  const [myData, setMyData] = useState(null)
  
  useEffect(() => {
    axios.get("https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m,relativehumidity_2m,apparent_temperature,precipitation,rain,showers,snowfall,weathercode,pressure_msl,visibility,windspeed_10m,temperature_80m,temperature_120m,temperature_180m&daily=weathercode,temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,sunrise,sunset,uv_index_max,precipitation_sum,showers_sum,snowfall_sum,precipitation_hours,windspeed_10m_max,windgusts_10m_max&current_weather=true&timeformat=unixtime&timezone=GMT")
      .then((res) => setMyData(res.data))
      .catch((err) => {
        console.log(err)
      });
  }, [])

  return (
    <>
      <div className="bg-dark"> 
        <button className=" bg-white  h-[2rem] w-[2rem] p-1 rounded-full top-3 m-5 absolute right-[10rem]"> </button>
        <button className=" bg-grey  h-[2rem] w-[2rem] p-1 rounded-full top-3 m-5 absolute right-[6rem]"> </button>
        <div className=" mt-[5rem] ml-[10rem]"> 
          {/* 使用可选链添加空值保护 */}
          <Card time={myData?.daily?.time[0]} />
        </div>
        <h1 className="text-white mt-[1rem] ml-[10rem]">Today's Highlight </h1>
        <Card2/>
      </div>
    </>
  )
}
export default Infopage;

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