React Hooks - 無法從狀態中獲取嵌套數據

Question

我的狀態“pokeData”仍然有困難。 我正在調用 pokeapi 並設置狀態，並且能夠獲得 1 級嵌套數據，其他任何內容都會出現錯誤並且我的狀態變得未定義。 下面是控制台的圖片和數據結構顯示的內容。

我的問題是在這一行代碼：`

 <img src={pokeData.sprites.front_default} alt=""/>

`

 import React, { useState, useEffect } from 'react'; import axios from 'axios'; const Card = () => { const [ pokeData, setPokeData ] = useState([]); useEffect(() => { axios .get('https://pokeapi.co/api/v2/pokemon/151') .then(res => { setPokeData(res.data); }) .catch(err => { console.log(err); }) }, []); console.log(pokeData); return ( <div className="card"> <h1 className="poke-name">{pokeData.name}</h1> <img src={pokeData.sprites.front_default} alt=""/> </div> ) } export default Card;

控制台錯誤

“pokeData”狀態下的數據

Answer 1

您的pokeData是通過異步操作接收的，因此在渲染時，您的數據可能尚未設置。

您可以在實際渲染之前檢查數據的可用性

{ (pokeData && pokeData.sprites) &&
   <img src={pokeData.sprites.front_default} alt=""/>
}

Answer 2

工作示例：鏈接 - 使用 optional_chaining 的沙箱

setPokeData 將是異步的，pokeData 中的數據可用性需要一些時間。 由於 pokeData 的初始值是空數組[] ，這個{pokeData.sprites.front_default}將是{[].sprites.front_default}並且你得到未定義的錯誤。

如果鍵值在對象中不可用，您可以使用可選鏈運算符 (?.)來安全地忽略。

<img src={pokeData?.sprites?.front_default} alt=""/>

參考：

• 為什么-react-setstate-usestate-does-not-update-immediately
• 可選鏈操作符