Reactjs ожидает завершения array.forEach перед продолжением обратного вызова

Question

Я использую JS и React только в течение короткого времени, и у меня возникают проблемы с ожиданием завершения цикла forEach, прежде чем продолжить.

Функция glitchLib, приведенная ниже, должна вытащить массив источников img из состояния, выполнить итерацию по элементам массива и «сбить» каждое изображение (фактический процесс сброса выполняется библиотекой javascript).Для каждого сбитого изображения я хочу поместить 2-элементный массив с исходным и сбитым источником в currentSaved[], а затем передать массив массивов в обратном вызове.

  glitchLib() {
    const currentSaved = [];
    var array = this.state.originalFiles; 
    array.forEach(function(src) {
      var originalImage = src;
      const image = new Image();
      image.src = src; 
      image.onload = () => {
        glitch()
          .fromImage(image)
          .toDataURL()
          .then((dataURL) => {
            const dataArray = [originalImage, dataURL];
            currentSaved.push(dataArray);
          });
        };
    });
    this.props.callback(currentSaved);  
  }

Если я заверну обратный вызов в setTimeout на ~ 10 секунд или около того, массив будет правильно перебираться, поэтому нет никаких проблем с тем, как библиотека js выполняет "глюки",который должен просто возвращать кодировку Base64 изображения.Без setTimeout передается пустой массив.

Как правильно ждать полной итерации массива (или, в этом отношении, есть ли лучший способ сделать это)?

Answer 1

Вы можете дождаться завершения ряда Promise с помощью Promise.all():

const glitch = () => Promise.resolve('xyz')
function glitchLib(callback) {
  const promises = []
  const array = ['abc', 'def']
  array.forEach(src => {
    const originalImage = src
    const image = new Image()
    image.src = src
    /*image.onload = */;(() => {
      promises.push(
        glitch()
          //.fromImage(image)
          //.toDataURL()
          .then(dataURL => [originalImage, dataURL])
      )
    })()
  })
  Promise.all(promises)
    .then(currentSaved => callback(currentSaved))
}

glitchLib(x => console.log(x))