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
• 可选链操作符