Javascript 我能'；I don’我不能从API中访问我想要的对象

我无法访问我想要的对象。此API中存在某种类型的对象。首先，我尝试访问poke name，这是最简单的一个

import React, { useState, useEffect } from "react";
import "./App.css";
import { Link } from "react-router-dom";

function PokemonList() {
  useEffect(() => {
    fetchPokemon();

  }, []); // square bracket means this only gone run when the component mounts

  const [pokemon, setPokemon] = useState([]);

  const fetchPokemon = async () => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon/3/`);
    const pokemon = await data.json();
    console.log(pokemon);
    setPokemon(pokemon);

我获取

pokemon

变量中的数据，然后

return(
 <h1> {pokemon.name} </h1>
)

我写的代码，但不工作。 我看到了那个错误消息

所以我不能对这些信息做出反应

顺便说一下，我想把图像放到屏幕上。

它有点不同于类型对象（我只是在第一张图片中提到过）

sprites

对象不像

0

，

1

嵌套对象那样存在。我们可以直接看到

back\u default

（sprites对象下的一个嵌套对象），这就是示例，它们是相同的还是不同的示例

我开始学习js，做出反应。我希望你们能帮助我，伙计们。我被困在那个洞里了，帮帮我！请：(

---

顺便说一句，我发现了这个API的一些用法

视频链接（时间33:44）=

为什么他在第一次提到的

map

函数中使用，在第二次提到的

[0]

中使用那东西（我不明白它是什么意思）。请解释一下

---

更新 当我添加空对象变量时，它起作用了。-谢谢@AntoineFrau-

但当我删除嵌套项时，项目仍在工作。我认为，它将中断并停止工作，但这两种方式都在工作。对此情况的解释是什么

---

这是因为，即使

pokemon

是

undefined

，React也会渲染组件。因此，如果尝试使用

undefined

变量的

map（）

函数，它将崩溃

一种解决方案是使用默认对象初始化Pokemon变量：

const [pokemon, setPokemon] = useState({
  "height": 0,
  "id": 0,
  "name": "",
  "sprites": {
    "default": ""
  }
  "types": [
    {
      "slot": 0,
      "type": {
        "name": "",
        "url": ""
      }
    }
  ]
});

{
pokemon.types.map（type=>{
返回{type.type.name}
})
} 

这样，它不会打印任何内容，而不会崩溃

注：他在视频中使用了口袋妖怪。能力[0]因为我猜他只是想展示口袋妖怪的第一个能力

更新

---

如果需要，还可以创建一个变量，如果数据尚未加载，该变量将阻止组件的呈现：

查看那些所有参数，我必须在其内部添加所有空版本。

const[pokemon，setPokemon]=useState（{}）是的，我知道，但是你只能把有用的放进去。顺便问一句，空字符串
[]
在它里面是什么意思
useState（）
const[pokemon，setPokemon]=useState（[]）；

意味着你的pokemon state的默认值是一个空数组：[]@Hasantzcan更新了答案，为您提供了另一种方法。这是因为您试图访问

type.type.name

，但当您删除嵌套对象时，它们将

未定义

。这就是所有对象都是空对象的原因！

const [pokemon, setPokemon] = useState({
  "height": 0,
  "id": 0,
  "name": "",
  "sprites": {
    "default": ""
  }
  "types": [
    {
      "slot": 0,
      "type": {
        "name": "",
        "url": ""
      }
    }
  ]
});

<div>
   {
      pokemon.types.map(type => {
         return <h1>{type.type.name}</h1>
      })
   } 
</div>