Question

无法在 React 中从 Axios.get 存储和访问数据

2022-02-17

330

reactjs react-hooks axios

作为 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]);