React调用Open-Meteo API后页面刷新报错“weather.hourly未定义”求助

错误原因与修复方案 #

你遇到的weather.hourly未定义错误，核心原因有两个：

1. 初始状态类型不匹配：你把weather的初始值设为数组[]，但API返回的是包含hourly属性的对象。组件首次渲染时，weather是数组，自然没有hourly属性，直接访问就会报错。
2. 变量初始化时机错误：你在组件顶层直接定义hourlyTemperaturesOneWeek和hoursOneWeek，不管weather是否已获取到数据，组件每次渲染都会执行这段代码——包括首次渲染时weather还未拿到数据的阶段。

修复后的代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  // 初始值设为null，与API返回的对象类型匹配
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('https://api.open-meteo.com/v1/forecast?latitude=65.01&longitude=25.47&hourly=temperature_2m')
      .then(response => {
        setWeather(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error(error);
        setLoading(false);
      });
  }, []);

  // 用可选链操作符避免空值访问报错，仅当weather存在时提取数据
  const hourlyTemperaturesOneWeek = weather?.hourly?.temperature_2m;
  const hoursOneWeek = weather?.hourly?.time;

  return (
    <div>
      {/* 加载状态仅判断loading即可 */}
      {loading && <p>Loading weather data from API. Please wait.</p>}
      {/* 确保数据加载完成后再渲染内容 */}
      {!loading && weather && (
        <div>
          <h1>Weather</h1>
          <p>Temperatures: {hourlyTemperaturesOneWeek?.join(', ')}</p>
          <p>Hours: {hoursOneWeek?.join(', ')}</p>
        </div>
      )}
    </div>
  );
}

export default App;

关键改动说明 #

• 将weather初始状态从[]改为null，与API返回的对象类型保持一致。
• 使用**可选链操作符?.**访问嵌套属性，即使weather或hourly不存在，也不会抛出错误，只会返回undefined。
• 优化渲染逻辑：仅当loading为false且weather存在时，才渲染数据内容，避免无效的状态判断。
• 用join(', ')将数组转为字符串，避免页面直接显示[object Array]。

图表库选择建议 #

结合你用Vite搭建React项目的场景，给你几个实用选项：

1. react-chartjs-2 + Chart.js #

• 优势：轻量灵活，API设计直观，社区活跃度高，文档完善。作为Chart.js的React封装，能快速实现折线图等基础图表，适合项目初期需求。
• 注意：需同时安装chart.js和react-chartjs-2两个包，配置简单，样式自定义方便。

2. Highcharts #

• 优势：功能极其全面，支持复杂图表类型，自带多种主题和交互效果，官方有专门的React封装highcharts-react-official。如果后续项目需要扩展复杂可视化需求，Highcharts是稳妥选择。
• 注意：体积比Chart.js大一些，但对大多数项目影响不大，文档和示例非常丰富。

3. Recharts #

• 优势：完全基于React生态开发，组件化设计，使用更贴合React编程习惯，代码简洁。体积小、性能不错，适合优先选用React生态的项目。
• 注意：复杂图表功能不如Highcharts全面，但实现折线图这类基础需求完全足够，自定义样式也很方便。

内容的提问来源于stack exchange，提问作者stand-twilight-nag