Как установитьState в React только после разрешения нескольких выборок внутри цикла

Question

В приложении React я пытаюсь установить setState в своем приложении только после того, как получаю множество разрешений AJAX, чтобы избежать многократного бесполезного повторного рендеринга.

У меня есть что-то вроде этого:

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 });
}

Теперь я хотел иметь только один setState после того, как все выборки будут разрешены, и затем сохранить все это в localStorage:

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

Есть идеи, как это сделать?

Answer 1

Вы хотите использовать 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())
}