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

Question

我从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;

应该发生的是，当我映射pokemonArr时，我想通过执行创建5个独立的pokemonthis.state.pokemonrr.map（pokemon=

我认为我的buildPokemon（）函数正在工作，因为当我在componentDidMount（）中调用它时，然后我在控制台中调用它。日志<代码>这个。状态pokemonar在render（）函数中，我实际得到了一个数组，返回的数组中有5个不同的pokemon，并填写了正确的字段。

当我画出这个的时候。状态口袋妖怪。地图（口袋妖怪）=

Answer 1

问题主要是如何解决promise。

数据不能立即可用，因此状态（pokemonArr）应该仅在数据可用时设置。

以下是重构的组件：

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>
    );
  }
}

Answer 2

在第一次渲染后执行，最初你的状态是pokemonArr：[]（whch是空的），所以你得到一个错误。你需要有条件地渲染像，

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

旁注：

在buildPokemon函数中，您将返回一个array，在componentDidMount中，您将其存储在array中，该数组创建了数组的数组，您只需从buildPokemon函数返回对象。

Answer 3

您的方法有几个问题，但最主要的问题是getPokemon（）是异步的。

返回的getPokemon（）promise从BuildPokemon（）和返回的对象从它的然后（）

在for（）循环中，创建这些promise的数组并使用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 }));    
}