Why Promise.all is not getting values?

Question

I am using React and inside useEffect I am pulling data but I am getting an emtpy array after all the promises are resolved and cannot figure out why. Here is the code:

const data = mainnet.FairLaunch.pools.map((pool) => {
  const loadingStakingData = async () => {
    const stakedValue = await getStakeValue(pool);
    const poolDaily = await getPoolDaily(pool);
    console.log( { stakedValue, poolDaily }) // all good here and printing what it has to print
    return { stakedValue, poolDaily };
  };
  return loadingStakingData();
});


Promise.all(data).then((values) => {
  console.log('value', values) // not logging anything here
  setStakingData(values);
}); // always an empty array

Any idea why this is happening?

Answer 1

You might be returning a pending promise in the map function. Maybe try this code instead to return the value

const data = mainnet.FairLaunch.pools.map(async (pool) => {
    const stakedValue = await getStakeValue(pool);
    const poolDaily = await getPoolDaily(pool);
    console.log( { stakedValue, poolDaily }) // all good here and printing what it has to print
    return { stakedValue, poolDaily };
});


Promise.all(data)
  .then((values) => {
    console.log('value', values)
    setStakingData(values);
  })
  .catch(console.error) // Remember to catch errors!!!