Reactjs 无法访问map函数内部的数组以将道具返回到其他组件

我正在从API获取数据。我正在使用API调用构建一个由5个对象组成的数组。我试图做的是迭代数组，使用每个数组索引中的数据构建一个组件，并将道具传递给另一个组件

我已尝试以正常方式访问元素，方法如下： img={pokemon.name}但它始终返回未定义的值。当我打字的时候 log（pokemon）我获取存储在对象数组中的单个pokemon

import React, { Component } from "react";
import Pokecard from "./Pokecard";

async function getPokemon() {
  const randomID = Math.floor(Math.random() * 151) + 1;
  const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomID}/`);
  const pokemonJSON = await pokeRes.json();
  return pokemonJSON;
}

function buildPokemon() {
  let pokemonArr = [];
  let builtPokemon = {};

  getPokemon()
    .then(data => {
      builtPokemon.name = data.forms[0].name;
      builtPokemon.exp = data.base_experience;
      builtPokemon.img = data.sprites.front_default;
      builtPokemon.type = data.types[0].type.name;

      pokemonArr.push(builtPokemon);
    })
    .catch(err => console.log(err));
  return pokemonArr;
}

class Pokedex extends Component {
  constructor(props) {
    super(props);
    this.state = { pokemonArr: [] };
  }
  componentDidMount() {
    const pokemonArr = [];
    for (let i = 0; i < 5; i++) {
      pokemonArr.push(buildPokemon());
    }
    this.setState({ pokemonArr });
  }
  render() {
    console.log(this.state.pokemonArr);
    return (
      <div className="Pokedex">
        {this.state.pokemonArr.map(pokemon => console.log(pokemon))}
      </div>
    );
  }
}

export default Pokedex;

import React，{Component}来自“React”；
从“/Pokecard”导入Pokecard；
异步函数getPokemon（）{
const randomID=Math.floor（Math.random（）*151）+1；
const poker=等待取回(`https://pokeapi.co/api/v2/pokemon/${randomID}/`）；
const pokemonJSON=await pokeRes.json（）；
返回口袋妖怪；
}
函数buildPokemon（）{
让pokemonar=[]；
让builtPokemon={}；
getPokemon（）
。然后（数据=>{
builtPokemon.name=data.forms[0].name；
builtPokemon.exp=data.base\u经验；
builtPokemon.img=data.sprites.front\u默认值；
builtPokemon.type=data.types[0].type.name；
pokemonar.push（内置pokemon）；
})
.catch（err=>console.log（err））；
返回口袋妖怪；
}
类Pokedex扩展组件{
建造师（道具）{
超级（道具）；
this.state={pokemonar:[]}；
}
componentDidMount（）{
const pokemonar=[]；
for（设i=0；i<5；i++）{
pokemonar.push（buildPokemon（））；
}
this.setState（{pokemonar}）；
}
render（）{
log（this.state.pokemonar）；
返回(
{this.state.pokemonar.map（pokemon=>console.log（pokemon））}
);
}
}
导出默认Pokedex；

应该发生的是，当我映射pokemonar时，我想通过

this.state.pokemonar.map（pokemon=>clg（pokemon）），它实际上显示每个单独的pokemon。当我将口袋妖怪项目传递到这样的组件中时
，我看到了所有的口袋妖怪数据。
当我键入
componentDidMount
在第一次渲染后执行时，最初您的状态是
pokemonar:[]
（whch为空），因此您会收到一个错误。您需要有条件地呈现如下内容：

{this.state.pokemonArr.length > 0 && this.state.pokemonArr.map(pokemon => console.log(pokemon))}


旁注：

在
buildPokemon
函数中，您将返回一个
array
，在
componentDidMount
中，您将其存储在
array
中，该数组将创建数组的
数组，您只需从
buildPokemon
函数返回
object
。
componentDidMount
在第一次渲染后执行，最初您的状态是
pokemonar:[]
（whch为空），因此您将得到一个错误。您需要有条件地呈现如下内容：

{this.state.pokemonArr.length > 0 && this.state.pokemonArr.map(pokemon => console.log(pokemon))}


旁注：

在
buildPokemon
函数中，您将返回一个
array
，在
componentDidMount
中，您将其存储在
array
中，该数组将创建数组的
数组，您只需要从
buildPokemon
函数返回
object
。
您的方法有几个问题，但主要问题是
getPokemon（）
是异步的

从
buildPokemon（）
返回
getPokemon（）
承诺，并从
then（）返回对象

在
for（）
循环中，创建这些承诺的数组，并使用
Promise.all（）

function buildPokemon() {

  let builtPokemon = {};
  // return the promise
  return getPokemon()
    .then(data => {
      builtPokemon.name = data.forms[0].name;
      builtPokemon.exp = data.base_experience;
      builtPokemon.img = data.sprites.front_default;
      builtPokemon.type = data.types[0].type.name;
      // return the object
      return builtPokemon
    });
}


componentDidMount() {
  const pokemonPromises = [];
  for (let i = 0; i < 5; i++) {
    pokemonPromises.push(buildPokemon());
  }
  Promise.all(pokemonPromises).then(pokemonArr => this.setState({ pokemonArr }));    
}

函数buildPokemon（）{
让builtPokemon={}；
//还债
返回getPokemon（）
。然后（数据=>{
builtPokemon.name=data.forms[0].name；
builtPokemon.exp=data.base\u经验；
builtPokemon.img=data.sprites.front\u默认值；
builtPokemon.type=data.types[0].type.name；
//返回对象
返回内置口袋妖怪
});
}
componentDidMount（）{
const pokemonPromises=[]；
for（设i=0；i<5；i++）{
pokemonPromises.push（buildPokemon（））；
}
然后（pokemonar=>this.setState（{pokemonar}））；
}
您的方法有几个问题，但主要问题是
getPokemon（）
是异步的

从
buildPokemon（）
返回
getPokemon（）
承诺，并从
then（）返回对象

在
for（）
循环中，创建这些承诺的数组，并使用
Promise.all（）

function buildPokemon() {

  let builtPokemon = {};
  // return the promise
  return getPokemon()
    .then(data => {
      builtPokemon.name = data.forms[0].name;
      builtPokemon.exp = data.base_experience;
      builtPokemon.img = data.sprites.front_default;
      builtPokemon.type = data.types[0].type.name;
      // return the object
      return builtPokemon
    });
}


componentDidMount() {
  const pokemonPromises = [];
  for (let i = 0; i < 5; i++) {
    pokemonPromises.push(buildPokemon());
  }
  Promise.all(pokemonPromises).then(pokemonArr => this.setState({ pokemonArr }));    
}

函数buildPokemon（）{
让builtPokemon={}；
//还债
返回getPokemon（）
。然后（数据=>{
builtPokemon.name=data.forms[0].name；
builtPokemon.exp=data.base\u经验；
builtPokemon.img=data.sprites.front\u默认值；
builtPokemon.type=data.types[0].type.name；
//返回对象
返回内置口袋妖怪
});
}
componentDidMount（）{
const pokemonPromises=[]；
for（设i=0；i<5；i++）{
pokemonPromises.push（buildPokemon（））；
}
然后（pokemonar=>this.setState（{pokemonar}））；
}
问题主要在于如何解决承诺

数据不能立即使用，因此状态（
pokemonar
）只能在数据可用时设置

以下是重构组件：

class Pokedex extends Component {
  constructor(props) {
    super(props);
    this.state = { pokemonArr: [] };
  }
  componentDidMount() {
    for (let i = 0; i < 5; i++) {
      this.getPokemon()
        .then((pokemon) => this.buildPokemon(pokemon));
    }
  }
  async getPokemon() {
    const randomID = Math.floor(Math.random() * 151) + 1;
    const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomID}/`);

    return pokeRes.json();
  }
  setPokemon(pokemon) {
    this.setState({
      pokemonArr: [
        ...this.state.pokemonArr, pokemon
      ],
    });
  }
  buildPokemon(data) {
    let builtPokemon = {};

    builtPokemon.name = data.forms[0].name;
    builtPokemon.exp = data.base_experience;
    builtPokemon.img = data.sprites.front_default;
    builtPokemon.type = data.types[0].type.name;

    this.setPokemon(builtPokemon);
  }
  render() {
    return (
      <div className="Pokedex">
        {this.state.pokemonArr.map(pokemon => console.log(pokemon))}
      </div>
    );
  }
}

类Pokedex扩展组件{
建造师（道具）{
超级（道具）；
this.state={pokemonar:[]}；
}
componentDidMount（）{
for（设i=0；i<5；i++）{
这个。getPokemon（）
.然后（（口袋妖怪）=>this.buildPokemon（口袋妖怪））；
}
}
异步getPokemon（）{
const randomID=Math.floor（Math.random（）*151）+1；
const poker=等待取回(`https://pokeapi.co/api/v2/pokemon/${randomID}/`）；
return pokeRes.json（）；
}
设置口袋妖怪（口袋妖怪）{
这是我的国家({
口袋妖怪：[
…这个州，口袋妖怪