React天气应用开发报Cannot read property '0' of undefined如何解决

安全阿岳

2026-10-5

报错原因

你遇到的报错是组件渲染时序和属性安全访问的问题：

WeatherDetail 首次渲染时，useEffect 内的接口请求还未返回，weatherInfo 是初始空对象，weatherInfo.weather 为 undefined，直接访问 [0] 触发类型错误。
你将 imgCode = weatherInfo.weather[0].icon 放在组件顶层执行，不管城市是否选择、数据是否返回，每次渲染都会执行这行取值逻辑，哪怕后续渲染时判断了city !== ""，顶层的取值逻辑依然会先执行，所以报错不会消失。

修复方案

直接修改WeatherDetail.js代码即可：

const [weatherInfo, setWeatherInfo] = useState({});

useEffect(() => {
  // 城市为空时不发送无效请求
  if (!city) return
  axios.get(setApiAddress(city))
    .then((response) => {
      setWeatherInfo(response.data);
    })
    .catch(err => {
      // 可自行添加错误提示逻辑
      console.error('天气数据获取失败', err)
    })
}, [city, setApiAddress]);

return (
  <div>
    {/* 新增weather属性存在性判断，用可选链做安全校验 */}
    {city !== "" && weatherInfo?.weather?.length > 0 && (
      <div className="card">
        <img
          className="card-img-top"
          alt="天气图标"
          src={`https://openweathermap.org/img/wn/${weatherInfo.weather[0].icon}.png`}
        />
        <div className="card-body">
          <h5 className="card-title">{weatherInfo.name}</h5>
          <p className="card-text">
            示例文本
          </p>
        </div>
      </div>
    )}
  </div>
);