我在这里有一个非常小的任务。我只需要将来自给定API的数据可视化为折线图，然后添加一些像样的样式。我在这里处于开始阶段，只是试图确保我的应用程序在我开始制作图表之前首先工作。然而，我甚至在处理图表问题之前就面临着非常奇怪的问题。给出以下代码：

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

function App() {
 const [weather, setWeather] = useState([]);
 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);
     });
 }, []);

 return (
   <div>
     {loading === true && !weather ? <p>Loading weather data from API. Please wait.</p> : null}
     <h1>Weather</h1>
     {console.log(weather)}
   </div>
 );
}

export default App;

字符串
我可以随意刷新页面多次，并且组件总是重新呈现。然而，即使是最小的更改，例如：

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

function App() {
  const [weather, setWeather] = useState([]);
  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);
      });
  }, []);

  const hourlyTemperaturesOneWeek = weather.hourly.temperature_2m;
  const hoursOneWeek = weather.hourly.time;

  return (
    <div>
      {loading === true && !weather ? <p>Loading weather data from API. Please wait.</p> : null}
      <h1>Weather</h1>
      {weather ? (
        <div>
      <p>Temperatures: {hourlyTemperaturesOneWeek}</p>
      <p>Hours: {hoursOneWeek}</p>
        </div>
      ) : null}
    </div>
  );
}

export default App;

型
这将是在保存文件的罚款.然而，在页面刷新，它打破了，我收到“天气.小时”是未定义.为了让页面再次工作在所有，我必须将其恢复到以前的代码.这是非常令人沮丧的，我已经在网上搜索的问题，并尝试了一些解决方案，但没有什么对我的网页工作.任何帮助将高度赞赏.我希望和思考，这是一些很简单的，有人可能会看到在一瞬间.问人工智能也没有得到任何有用的结果.感谢所有有好的解决方案的人：）
P.S.不知道是否值得一提，但我也使用Vite进行设置。此外，我想使用Highcharts，Chart.js或react-chartjs-2，但我也愿意接受其他建议，如果有人有一些。