使用 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}/> 
    }