无法在 React 中存储和访问来自 Axios.get 的数据

Question

作为 React 的新用户，我正在试用天气应用程序。我的问题是数据已收到，但正在存储和检索数据。如果我只存储数据中的几个值，那么它的工作、存储整个对象或数组的数组就不起作用。我想存储所有数据。我不知道是什么导致了这个问题。

密码是，

import './Weather.css'
import axios from "axios";
import { useEffect, useMemo, useState } from "react";

const Weather=()=>{
  let bg={background:"url('./images/Weather/sky-sunny.jpg')"}
  let [status, setStatus]=useState([])

  let today=new Date;
  let HourTime=today.getHours()
  let hourTime=(HourTime<13)?(HourTime+" am"):(HourTime-12 +" pm")

  if(HourTime<6 && HourTime>18){
    bg={background:"url('./images/Weather/sky-clear-night.jpg')"}
  }
  
  useEffect(()=>{
    axios.get("https://api.open-meteo.com/v1/forecast?latitude=13.04&longitude=80.23&hourly=temperature_2m,relativehumidity_2m,windspeed_10m")
    .then(res=>setStatus([res.data.hourly.windspeed_10m,
        res.data.hourly.temperature_2m,
        res.data.hourly.relativehumidity_2m]))
    },[])

  return(
    <div className="weatherApp">
      <div className='sky' style={bg}>
        <div className='temperature'>
          <span><h1>{status[1][HourTime]}</h1><h3><sup>o</sup>C</h3></span>
        </div>
      </div>
    </div>
  )
}
export default Weather;

在上面的代码中，我试图从 API 数据中存储 3 个数组，但我得到的是

"TypeError: Cannot read properties of undefined"

但是如果我在useEffect中使用下面的代码，就没有问题了。

useEffect(()=>{
  axios.get("https://api.open-meteo.com/v1/forecast?latitude=13.04&longitude=80.23&hourly=temperature_2m,relativehumidity_2m,windspeed_10m")
    .then(res => setStatus([res.data.hourly.windspeed_10m[0],
      res.data.hourly.temperature_2m[0],
      res.data.hourly.relativehumidity_2m[0]])
    )
},[])

我想从每个数组中存储 1 个以上的值。这需要更好的实现吗？

Answer 1

最初status是一个空数组。您需要检查数组的长度以了解它是否由 API 调用填充。

而不是

{status[1][HourTime]}

像下面这样尝试

{status.length >= 2 && status[1][HourTime]}

Answer 2

在初始渲染时 status 是空的，因为 status[1] 是 undefined 因此你需要检查：

{status[1] && status[1][HourTime]}

Does this need a better implementation?

您可以像这样将 api 函数移动到 useEffect 之外

const WEATHER_API =
  'https://api.open-meteo.com/v1/forecast?latitude=13.04&longitude=80.23&hourly=temperature_2m,relativehumidity_2m,windspeed_10m';

// useCallback to avoid updating on every re-render
const getWeather = React.useCallback(async () => {
  try {
    const response = await axios.get(WEATHER_API);
    setStatus([
      response.data.hourly.windspeed_10m,
      response.data.hourly.temperature_2m,
      response.data.hourly.relativehumidity_2m,
    ]);
  } catch (error) {
    // handle error
  }
}, []);

React.useEffect(() => {
  getWeather();
}, [getWeather]);

无法在 React 中存储和访问来自 Axios.get 的数据

Cannot store and access data from Axios.get in React

reactjs

axios

react-hooks