javascript - 如何使用 API 内部的 API URL 将对象添加到数组中？

Question

我有以下代码:

import React, { Component } from "react";
import NavigationBar from "../../Components/NavigationBar/NavigationBar";
import PokemonCard from "../../Components/PokemonCard/PokemonCard";
// import { Container } from './styles';
import api from "../../config/api";

export default class Listagem extends Component {
  constructor(){
    super()
    this.state = {
      pokemons: []
    };
  }
  
  

   async componentDidMount() {
    //Popula array de Pokemons
      await api.get("https://pokeapi.co/api/v2/pokemon").then(res => {
      const pokemonsArray = res.data.results;
      const pokemonData = [];
      //Vai dentro do array e busca informações que estão na URL do objeto
      pokemonsArray.forEach(pokemon => {
         api.get(pokemon.url).then(res => {
          pokemonData.push({
            name: res.data.name,
            moves: res.data.moves,
            types: res.data.types,
            image: res.data.sprites.front_default
          });
        });
      });
      // console.log(res)
      this.setState({ pokemons: pokemonData });
      // console.log(this.state.pokemons)
    });
  }

  render() {
    console.log(this.state.pokemons)
    return ( 
      <div>
        <NavigationBar />
        {this.state.pokemons.map(pokemon => (
          <PokemonCard pokemon={pokemon} />
        ))}
      </div>
    );
  }
}

我正在尝试从 api.get 内的 URL 获取数据，但我不知道如何使用返回的数据更改状态。

当我尝试控制台记录“this.state.pokemons”时，我得到了 2 个数组。一个是空的，另一个是我需要的数据。所以我无法渲染该组件。 This is the output on the chrome console

提前致谢。这可能是一个愚蠢的问题，但我一整天都被困在这个问题上。

Answer 1

我认为您还应该为内部 API 调用添加 async/await ，以便您能够在 pokemonData 数组中获取数据，

pokemonsArray.forEach(async pokemon => {
     await api.get(pokemon.url).then(res => {
       pokemonData.push({
          name: res.data.name,
          moves: res.data.moves,
          types: res.data.types,
          image: res.data.sprites.front_default
       });
     });
})