React Hooks - 无法从状态中获取嵌套数据答案

【问题标题】：React Hooks - Can't get nested data from stateReact Hooks - 无法从状态中获取嵌套数据
【发布时间】：2020-10-29 02:22:34
【问题描述】：

我的状态“pokeData”仍然有困难。我正在调用 pokeapi 并设置状态，并且能够获得 1 级嵌套数据，除此之外，我得到一个错误并且我的状态变得未定义。下面是控制台的图片和数据结构显示的内容。

我的问题在于这一行代码：`

&lt;img src={pokeData.sprites.front_default} alt=""/&gt;

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;

Console Error

Data in "pokeData" state

【问题讨论】：

标签： javascript axios react-hooks

【解决方案1】：

您的pokeData 是通过异步操作接收的，因此在渲染时，您的数据可能尚未设置。

您可以在实际渲染之前检查数据的可用性

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

【讨论】：

你也可以这样做：<img src={pokeData?.sprites?.front_default} alt=""/>，这样你就可以写更少的代码，而且有点容易理解

【解决方案2】：

工作示例：link - sandbox using optional_chaining

setPokeData 将是异步的，pokeData 中的数据可用性需要一些时间。由于 pokeData 的初始值是空数组[]，所以这个{pokeData.sprites.front_default} 将是{[].sprites.front_default}，你会得到未定义的错误。

如果对象中的键值不可用，您可以使用可选链接运算符 (?.) 安全地忽略。

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

参考：

【讨论】：