javascript - 遍历数组并动态发送http请求

Question

好的，我有这个数组 pokemonColor=['name1', 'name2', 'name3']。我怎样才能遍历这个数组并动态发送 http 请求，这样我就可以像下面这样更新状态？因为我正在尝试的这个不起作用，它创建了一个 JavaScript 对象，但是它们太多了......

这就是我想要的:

this.state.pokemon:[ 
    {name: name1, img: img1},
    {name: name2, img: img2},
    {name: name3, img: img3} 
]

这就是我正在尝试的方式:

componentDidUpdate() {
    // console.log(this.state.pokemonColor);
    this.state.pokemonColor.forEach(pok => {

      axios.get(`https://pokeapi.co/api/v2/pokemon/${pok}/`).then(res => {
        // console.log(res.data.sprites.front_shiny);


        this.setState({
          ...this.state,
          pokemon: {
            name: res.data.name,
            img: res.data.sprites.front_shiny
          }
        });
      });
    });
    // console.log(this.state.pokemon);
  }

Answer 1

首先 - this.state.pokemon = [...] 直接改变状态。您的应用可能会崩溃，或者至少您会在控制台中收到一条长长的红色错误。

其次 - 您不必在 setState 函数中解构 state。

第三 - 对于每个 axios get 请求，您都在覆盖您所在州的 pokemon 字段。我建议您将 pokemons 保存在数组中。

this.setState((prevState) => ({
   pokemon: [
      ...prevState.pokemon,
      {
         name: res.data.name,
         img: res.data.sprites.front_shiny,
      },
   ],
});

然后您将能够通过引用 this.state.pokemons 来访问您的 pokemons，这将是一个对象数组。