What could be the reason for my component not getting the asynchronous data?

Question

What could be the reason for my component not getting the asynchronous data?

Currently, I am delving into the intricacies of React and have been following a tutorial that covers creating components, passing props, setting state, and querying an API using useEffect(). Feeling confident in my understanding up to this point, I decided to put my knowledge to the test by attempting to build something on my own.

Let me share with you my App component:

import './App.css';
import CoinList from './components/CoinList/CoinList';
import { useState, useEffect } from 'react';

        
const heldCoins = ['bitcoin', 'ethereum', 'terra-luna']
    const [coins, setCoins] = useState(null)

    async function getCoinData(coinArray) {
        let myCoins = []  // thinking I should use map to create this array
        for await (let coin of coinArray) {
            fetch(`https://api.coingecko.com/api/v3/coins/${coin}`)
                .then(res => res.json())
                .then(data => {
                    const coinData = {
                        coinName: data.id,
                        price: data.market_data.current_price.gbp
                    }
                    myCoins.push(coinData)
                })
        }
        return myCoins
    }

    useEffect(() => {
        getCoinData(heldCoins).then(data => setCoins(data))
    }, [])

    return (
        <>
            {coins && <CoinList type="holding" coins={coins} />}
        </>
    )
}
export default App;

Upon reflection, I can see that my code is somewhat messy with both async functions and .then() being utilized. I also realize that I should probably be utilizing map to create the new array. Nonetheless, I believe that this current setup should work...

The getCoinData function returns a promise which contains an array of data objects. Once this promise resolves, it updates the state using setCoins within the useEffect hook. My expectation is that this action will trigger a re-render and make the data accessible to the CoinList component.

However, I am encountering an issue where an empty array is being passed to CoinList before the API data has had a chance to return.

I find it puzzling that the same process effectively works in the guided tutorial but is failing here. I'm struggling to identify where I may have gone wrong.

javascript reactjs asynchronous react-hooks

Answer 1

Answer №1

I have some doubts about the functionality of your getCoinData function.

    async function getCoinData(coinArray) {
        let myCoins = [];
        for await (let coin of coinArray) { // here coinArray is not an async iterable, so there's almost no wait happening here
            fetch(/*some api/)
                .then(/*some code*/)
                .then(data => {
                    // some code
                    myCoins.push(coinData)
                })
        }
        return myCoins // I don't see how this waits for the fetch to finish
    }

If you look at the comments in the code snippet above, it appears that the return statement occurs before the completion of the fetch request, leading to a potentially empty return value.

An alternative approach could be using Promise.all instead of the somewhat messy for-await-of loop, like this:

async function getCoinData(coinArray) {
  const promisesArray = coinArray.map((coin) =>
    fetch(`https://api.coingecko.com/api/v3/coins/${coin}`)
      .then((res) => res.json())
      .then((data) => {
        const coinData = {
          coinName: data.id,
          price: data.market_data.current_price.gbp,
        };
        return coinData;
      });
  );
  await Promise.all(promisesArray);
  return coinData;
}

This way, each fetch operation is awaited effectively, ensuring that the function does not return prematurely.

Answer 2

I have some doubts about the functionality of your getCoinData function.

    async function getCoinData(coinArray) {
        let myCoins = [];
        for await (let coin of coinArray) { // here coinArray is not an async iterable, so there's almost no wait happening here
            fetch(/*some api/)
                .then(/*some code*/)
                .then(data => {
                    // some code
                    myCoins.push(coinData)
                })
        }
        return myCoins // I don't see how this waits for the fetch to finish
    }

If you look at the comments in the code snippet above, it appears that the return statement occurs before the completion of the fetch request, leading to a potentially empty return value.

An alternative approach could be using Promise.all instead of the somewhat messy for-await-of loop, like this:

async function getCoinData(coinArray) {
  const promisesArray = coinArray.map((coin) =>
    fetch(`https://api.coingecko.com/api/v3/coins/${coin}`)
      .then((res) => res.json())
      .then((data) => {
        const coinData = {
          coinName: data.id,
          price: data.market_data.current_price.gbp,
        };
        return coinData;
      });
  );
  await Promise.all(promisesArray);
  return coinData;
}

This way, each fetch operation is awaited effectively, ensuring that the function does not return prematurely.

Answer 3

Answer №2

Implement promise all to initiate parallel requests

async function retrieveCoinData(coinList) {
  const promises = coinList.map((coin) =>
    fetch(`https://api.coingecko.com/api/v3/coins/${coin}`)
      .then((response) => response.json())
      .then((data) => {
        const coinInfo = {
          name: data.id,
          price: data.market_data.current_price.gbp,
        };
        return coinInfo;
      })
  );
  return Promise.all(promises);
}

Answer 4

Implement promise all to initiate parallel requests

async function retrieveCoinData(coinList) {
  const promises = coinList.map((coin) =>
    fetch(`https://api.coingecko.com/api/v3/coins/${coin}`)
      .then((response) => response.json())
      .then((data) => {
        const coinInfo = {
          name: data.id,
          price: data.market_data.current_price.gbp,
        };
        return coinInfo;
      })
  );
  return Promise.all(promises);
}

What could be the reason for my component not getting the asynchronous data?

Answer №1

Answer №2

Similar questions

React Component paired with SubComponent has encountered an issue with hot reloading, preventing it from properly

Animation on React child component disappears when re-rendered

Storing a jquery ajax response for faster retrieval in javascript/browser

Mastering the Material-UI Grid in SPAs: Conquering the Negative Margin Dilemma

Target the <select> element within a <tr> using jQuery selector and apply an empty css style

Show the ajax response on a separate page

The animation in Material UI does not smoothly transition with the webkit scrollbar

Dismiss the Popover in Ionic 2

Guide on Implementing jQuery UI Autocomplete with Chrome's Speech Input Feature

Is there a way to extract the content length from the raw DraftJS data?

Tips for transferring the output of a JavaScript async function to a Python variable

The solution to enabling multiple inputs when multiple buttons are chosen

Modify mouse pointer when an object is clicked using JavaScript

Ways to display or conceal dual views within a single Marionette js region

Tips on accessing files saved in a one-to-many connection using Mongoose

Best practices for hiding or showing columns in a material-ui table

What is the correct way to utilize the createAsyncThunk function in TypeScript?

Effective approach for managing a series of lengthy API requests

What is the best way to display user input within a paragraph using React?

Floating action button within a collapsible panel