Reactjs 在继续回调之前等待 array.forEach 完成答案

【问题标题】：Reactjs waiting for array.forEach completion before continued with callbackReactjs 在继续回调之前等待 array.forEach 完成
【发布时间】：2019-05-03 00:11:48
【问题描述】：

我只使用了 JS 和 React 很短的时间，并且遇到了等待 forEach 循环完成后再继续的问题。

下面的函数 glitchLib 应该从状态中拉出一个 img 源数组，遍历数组的元素并对每个图像进行“故障处理”（故障处理的实际过程是使用 javascript 库完成的）。对于每个出现故障的图像，我想将具有原始源和故障源的 2-elem 数组推送到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，则传递一个空数组。

等待数组完全迭代的正确方法是什么（或者就此而言，有没有更好的方法来做这种事情）？

【问题讨论】：

标签： reactjs foreach promise react-async

【解决方案1】：

您可以使用Promise.all() 等待多个Promises 完成：

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

【讨论】：