Javascript 迭代槽数组并动态发送http请求

好的，我有这个数组

pokemonocolor=['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);
  }

---

首先-

this.state.pokemon=[…]

直接变异状态。你的应用程序可能会崩溃，或者至少你会在控制台中收到一个长的红色错误

第二，您不必在

setState

函数中分解

state

状态

第三，每次axios

get

请求都会覆盖您所在州的

pokemon

字段。我建议您将

口袋妖怪

放在阵列内

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

---

然后，您可以通过引用

this.state.pokemons

来访问您的

口袋妖怪

，它将是一个对象数组。

this.state.pokemon

直接变异state hi@kind user，目前我正在执行forEach的数组有40个项目（名称）。当我使用console.log（res.data.sprites.front_）时；在一个http请求中，它记录了来自数组中所有名称的40个图像，这些名称也是如此。这很好，但是当我尝试设置状态时，就像你建议的那样，它记录了300多个对象，每个对象的内部比前一个对象多一个对象。。。这是我的问题，我不知道如何更新状态。。。这与componentDidUpdate的生命周期有关吗？是componentDidUpdate给我带来了问题。。。当我在一个单独的函数中执行此操作，然后在需要的地方调用该函数时，现在可以按照您建议的方式更新状态了。。。。多谢各位@SecondClassCitizen我忘了告诉你不能在

componentDidUpdate

内使用

setState

或

componentWillUpdate

，因为它将以无限循环结束。我很高兴你把它修好了