时间戳

首页 > 解决方案 > 使用 React 钩子将数组元素分配给状态的正确方法是什么？

javascript - 使用 React 钩子将数组元素分配给状态的正确方法是什么？

问题描述

我正在制作基于 api 的简单天气应用程序

在功能组件的开头，我声明了这一点

   const [pressure, setPressure] = useState("")
   const [hourTemp, setHourTemp] = useState([])

然后我使用 fetch() 从 api 下载数据对象并将值分配给状态。压力（例如）是单个值，但在我的应用程序中，我需要每小时预测，所以我采用整个每小时数组并对其进行过滤（它有 48 小时，我只需要 10 小时）。

    setPressure(data.current.pressure)
    let newArray = data.hourly.filter(a => {
       return data.hourly.indexOf(a) < 10
    })

创建 newArray 后，我可以 console.log在此处输入图像描述它并完全按照我想要的方式打印 10 个对象的数组。

但是当我将此数组分配给状态时

setHourTemp(newArray)

然后传递一个元素作为道具，它返回未定义

 <WeatherBlock temp={hourTemp[0].temp}/> //TypeError: hourTemp[0] is undefined

标签： javascriptarraysreactjsreact-hooks

解决方案

因为您使用fetch的是异步函数，所以需要时间来加载数据。当你第一次调用 /renderhourTemp[0]时，数据仍然是空的，它返回错误 undefined。所以你需要验证数据是否存在。有很多方法可以做到这一点：

  1. 使用三元表达式
<WeatherBlock temp={hourTemp[0] ? hourTemp[0].temp : 0}/>
  1. 使用条件渲染，在返回之前使用 if else
    if(hourTemp[0]){
      return <WeatherBlock temp={hourTemp[0].temp}/> 
    } else {
      return <WeatherBlock temp={0}/> 
    }

推荐阅读