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

Question

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

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

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

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

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

创建 newArray 后，我可以 console.log 它和它完全按照我想要的方式打印 10 个对象的数组。

但是当我将此数组分配给 state

setHourTemp(newArray) 

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

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

Answer 1

尝试添加一个空/空验证来检查您的数组是否有效。

有很多方法可以做到这一点，但要测试：

{hourTemp ? <WeatherBlock temp={hourTemp[0].temp}/> : <></> }

Answer 2

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

1. 使用三元表达式

<WeatherBlock temp={hourTemp[0] ? hourTemp[0].temp : 0}/> 

2. 使用条件渲染，在返回之前使用 if else

    if(hourTemp[0]){
      return <WeatherBlock temp={hourTemp[0].temp}/> 
    } else {
      return <WeatherBlock temp={0}/> 
    }