Reactjs 不等待解决的异步调用循环

我正在尝试使用Pokeapi+React-Redux+TS构建一个简单的口袋妖怪应用程序

对于熟悉此API的用户，对pokemon列表的基本调用将返回一个包含pokemon名称的对象和一个包含端点的url，以获取详细信息

我需要同时选择两个电话（列表+每个口袋妖怪的详细信息）。发生的事情是（显然）“list”调用解析为ok，但不等待细节调用来解析

代码如下：

async function getDetailedInfo(id: number) {
return  await 
axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`);
}

export const morePokemon = (url: string) => async (dispatch: 
Function) => {
 try {

const response = await axios.get(url); //Always resolves properly


const newPokemon: stateInterface['pokemon'] = 
response.data.results.map(
  (element: { name: string; url: string }) => ({
    name: element.name,
    id: element.url.split('/')[6],
    inTeam: false,
    details: {}
  })
);

 newPokemon.forEach( async (pok, i)=>  {

  newPokemon[i].details =  await getDetailedInfo(pok.id)
  console.log(newPokemon[i].details) // REQUIRED DATA LOGED HERE
})


 console.log(newPokemon) // REQUIRED DATA LOGED AS WELL

dispatch(nextPokemon(response.data.next));
return dispatch(morePokemonSuccess(newPokemon));
 } catch (err) {
  return err;
  } 
};

但是，在组件中：

   function PokemonList({
  state,
  dispatch,
}: {
  state: stateInterface;
  dispatch: Function;
}): JSX.Element {
  useEffect(() => {
    dispatch(morePokemon(state.next));

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch]);

  const list = state?.pokemon?.map((element: any) => {
    console.log(element); // ******** //
    return (
      <div className="list__item" key={element.id}>
        ......

功能口袋妖怪列表({
国家,，
派遣，
}: {
状态：状态接口；
调度：功能；
})：JSX.Element{
useffect（（）=>{
调度（morePokemon（state.next））；
//eslint禁用下一行react HOOK/deps
}，[发送]；
const list=state？.pokemon？.map（（元素：any）=>{
console.log（元素）；//*******//
返回(
......

如果我在state.pokemon.map函数“element”中记录console日志，我可以看到有一个“detail”属性，其中包含每个pokemon的详细信息，但是如果我在同一点上记录console.log“element.detail”，它将返回一个空对象

使用Redux调试工具，我可以看到详细信息是空的，这是一个异步问题，但我如何记录“元素”并查看“详细信息”属性是否用所需数据实现，以及如果我记录“elements.details”，如何显示空对象？登录“morePokemon”函数也是如此。这种情况仅发生在“getDetailedInfo”函数中

这让我快发疯了

---

提前感谢您使用ES2018，您可以使用循环按顺序执行API调用

for await (const [i, pok] of newPokemon.entries()) {
    newPokemon[i].details =  await getDetailedInfo(pok.id)
}

---

将

newPokemon.forEach（…）

更改为

wait Promise.all（newPokemon.map（…）

这能回答你的问题吗？谢谢你的回答！！@ponury kostek它起作用了！！非常感谢！！感谢#2；我需要初始化“I”同样，在这个循环中访问新口袋妖怪数组的位置，我得到：口袋妖怪不是数组类型，因为要获取索引，需要：for（newPokemon的const[I，pokemon]）这是一个很好的初学者项目，所以请按照自己的进度进行，并在出现问题时提出问题。但只是想让你思考一下：如果你想让这个项目真正优化，你可以立即将不完整的细节发送给redux，这样你就可以部分渲染口袋妖怪（比如显示名称）当详细信息等待获取时。谢谢回答！正如我上面所说的，为了使用该循环，我需要获取每个循环中acces位置的索引。我需要使用fot（newPokemon的const[I，element]），我得到一个TS错误，该错误表示“element”不是数组类型，无法更改，否则我将破坏所有代码