Cannot change state in Axios ReactJS and cannot retrieve data in order

Question

I am trying to grab the statistic of the COVID-19 from an API from RapidAPI. I want to grab the stats by date insert the data into a Graph. The problem is the API link can only have a date in it, like this:

https://covid-19-data.p.rapidapi.com/report/totals?date-format=undefined&format=undefined&date=2020-04-15

What I did is use a for loop to get ten dates and use Axios to retrieve every day's data like so:

const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');

const [labels, setLabels] = useState([])

useEffect(() => {

    for(let i=dd-10; i<dd; i++) {
        Axios({
            method: 'GET',
            url: `https://covid-19-data.p.rapidapi.com/report/totals?date-format=undefined&format=undefined&date=2020-${mm}-${i}`,
            headers: {
                "x-rapidapi-host": "covid-19-data.p.rapidapi.com",
                "x-rapidapi-key": "cfb0f14a9fmsh913ae802309e7c9p175585jsn825aebcbd5ac"
            }
        })
        .then(response => {
            let temp = [...labels]
            temp.push(response.data[0].date)
            setLabels(temp)
        })
        .catch(error => {
            console.log(error)
        })
    }

}, [])

And the problem is instead of appending the new date to labels array, the labels change every time Axios retrieves a new date.

I did some research online and people say something like the data is not yet loaded hence when I set the state it sort of set empty stuff and something like that but I don't quite understand what they are saying.

Besides that, when it retrieves data, it doesn't retrieve it in order. For example, today is the 15th of April, it should retrieve the data in order like: 05 06 07 08 09 10 11 12 13 14 but instead, it just jumps randomly. If I console.log it at .then(), this will appear:

As you can see, it is not in order.

Please help me take a look, I'd googled for solutions but to no avail.

You can take a look at this answer https://stackoverflow.com/questions/61227909/why-is-state-always-empty/61228047#61228047 — Samuel Vaillant, Apr 15 '20 at 15:39
The calls are asynchronous so we don't have any guarentee which one will finish first. With `Promise.all` the function resolves only once all of the functions have complete. Now we're are sure the results are there we can return them in the correct order. — Samuel Vaillant, Apr 15 '20 at 15:52

score 1 · Accepted Answer · answered Apr 15 '20 at 16:15

That is because the results are received asynchronous and the state is updated synchronous. Try this solution

useEffect(() => {
  const today = new Date();
  const dd = String(today.getDate()).padStart(2, "0");
  const mm = String(today.getMonth() + 1).padStart(2, "0");

  const fetchData = async (date) => {
    if (date >= dd) return;

    const result = await Axios({
      method: "GET",
      url: `https://covid-19-data.p.rapidapi.com/report/totals?date-format=undefined&format=undefined&date=2020-${mm}-${date}`,
      headers: {
        "x-rapidapi-host": "covid-19-data.p.rapidapi.com",
        "x-rapidapi-key": "cfb0f14a9fmsh913ae802309e7c9p175585jsn825aebcbd5ac",
      },
    });

    setLabels((val) => {
      let temp = [...val];
      temp.push(result.data[0].date);
      return temp;
    });
    fetchData(++date);
  };

  fetchData(dd - 10);
}, []);

This solves it but I don't quite understand. How do you loop through the date without using any loop functions? — Jonathan, Apr 16 '20 at 12:22
I have used recursion, `fetchData` is calling itself until the date reach the current date. — Aleksandar, Apr 16 '20 at 16:16

Cannot change state in Axios ReactJS and cannot retrieve data in order

1 Answers1