How to setState in React only after multiple fetches inside a loop are resolved

Question

In a React application, I'm trying to setState in my App only after I get lots of AJAX fetches resolved to avoid multiple useless re-rendering.

I have something like this so far:

const URL = https://url/api/
const NUM_OF_ITEMS = 10;
let allData = [];

componentDidMount() {
  for (let i = 1; i <= NUM_OF_ITEMS; i++) {
    this.fetchData(`${URL}${i}/`)  //ex. https://url/api/1/, https://url/api/2/...
  }
}

const fetchData = URI => {
  fetch(URI)
  .then(response => response.json())
  .then(data => {
    allData = [ ...allData, data];
  })
  .catch( error => this.setState({ error });
}

Now I wanted to have just one single setState after all fetches are all resolved, and then save it all into localStorage:

this.setState({ allData })
localStorage.setItem("allData", JSON.stringify(allData))

Any ideas on how to do it?

moonwave99 · Accepted Answer · 2018-10-04 22:28:14Z

3

You want to use Promise.all:

componentDidMount() {
  const requests = [];
  for (let i = 1; i <= NUM_OF_ITEMS; i++) {
    requests.push(this.fetchData(`${URL}${i}/`));
  }
  Promise.all(requests).then((arrayWithData) => {
     // here you can use setState with all the stuff
  });
}

const fetchData = URI => {
  fetch(URI)
  .then(response => response.json())
}

answered Oct 4, 2018 at 22:28

moonwave99

22.9k3 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anya Over a year ago

Thank you for your answer. But I guess something isn't working... I've placed console.logs of "requests" before and after Promise.all and they all return "undefined" :/

hjrshng Over a year ago

You must return the promise inside the fetchData: fetchData = URI => { return ....

Anya Over a year ago

If I make the fetch inside the push requests.push(fetch(${URL}${i}/).then(res => res.json())); it works fine, but if I try to do the fetches through a callback as in the example, it always returns "undefined". I wonder why this happen?!

Anya Over a year ago

The return!! Brilliant!! That's what I was missing!! Thanks a lot @moonwave99 and @ha-ja!!

Collectives™ on Stack Overflow

How to setState in React only after multiple fetches inside a loop are resolved

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related