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;

Console Error

Data in "pokeData" state

Answer 1

您的{ (pokeData && pokeData.sprites) && <img src={pokeData.sprites.front_default} alt=""/> }是通过异步操作接收的，因此在渲染时，您的数据可能尚未设置。

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

$data = load_in_huge_file('test.csv');

while (1)
{
    var_dump(memory_get_usage(false));
    var_dump(memory_get_usage(true));
    sleep(4);
    unset($data);
}

Answer 2

工作示例：link - sandbox using optional_chaining

setPokeData将是异步的，并且pokeData中的数据可用性将需要一些时间。由于pokeData的初始值为空数组[]，因此该{pokeData.sprites.front_default}将为{[].sprites.front_default}，您将得到未定义的错误。

您可以使用可选的链接运算符（？。）来安全地忽略键值是否在对象中不可用。

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

参考：

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

2 个答案: