Javascript 在React中映射时处理多个get请求

我有一个组件，其中我通过数组

map（）

来渲染子组件

这是我代码的一部分：

//口袋妖怪示例
常数口袋妖怪=[
{
身份证号码：1
名称：“布尔巴苏尔”
},
{
id:2，
姓名：“艾维索”
},
{
id:3，
名称：“维努索”
}
];
//地图穿越口袋妖怪
const mappedpookemons=pokemons.map（（p，i）=>{
返回；
});
//渲染
返回(
神奇宝贝：
{mappedpookemons}
);

在子组件中，使用axios完成get请求，以从公共API（）获取数据

const[pm，setPm]=useState（null）；
useffect（（）=>{
axios
.get（“https://pokeapi.co/api/v2/pokemon/“+pokemon.id）
。然后（（响应）=>{
setPm（响应数据）；
})
.catch（（错误）=>{
console.log（错误）；
});
}，[pokemon.id]）；

我想要实现的是在呈现组件之前等待所有数据的接收，我听说了

Promise.all（）

，但不确定在哪里实现它是否是正确的方法

---

我这样做是为了让您可以尝试一些事情。

如果状态被放入父组件中，您可以轻松地等待所有问题得到解决。将

口袋妖怪

置于状态，然后：

// parent
useEffect(() => {
  Promise.all(
    pokemons.map(p => axios
      .get("https://pokeapi.co/api/v2/pokemon/" + p.id)
      .then(res => res.data)
    )
  )
  .then((allData) => {
    const combined = pokemons.map((p, i) => ({ ...p, data: allData[i] }));
    setPokemons(combined);
  })
  .catch(handleErrors); // don't forget this
}, []);

---

然后，只渲染子组件一次

pokemons[0]。数据存在，并根据需要使用
pokemon
道具中的数据。
您的要求非常广泛，但一般来说，听起来您希望在父组件中执行AJAX请求，然后在所有请求完成之前不显示子组件。您可以跟踪状态以指示“数据正在加载”，并在回调中将该状态更新为
Promise.all
。现在在父组件中进行提取是有意义的，谢谢您的帮助。我想我只是想在子组件中执行fetch，因为我并不总是映射所有的pokemons，但有时只在页面上显示一个pokemons，但是经过思考，我可以而且可能也应该在父组件中执行此操作。