计算循环进度 React.js答案

【问题标题】：count for Loop progress React.js计算循环进度 React.js
【发布时间】：2020-03-03 20:26:47
【问题描述】：

我这里有一个函数，它循环遍历一组图像文件，读取文件，然后一次将一个文件上传到 aws s3。

我试图弄清楚如何跟踪循环何时完成，然后将 useState 变量设置为 true，这样我就可以有条件地渲染某些元素。

我正在考虑创建一个计数器，当计数器等于数组长度时，调用 useState，但我不确定最好的方法是什么。

非常感谢任何有关这方面的指导。

  async function handleSubmit(event) {
         event.preventDefault();

      const filesAsArray = [...fileToUpload.current.files];

        for (let i = 0; i < filesAsArray.length; i++) {                       

      const content = await readContent(filesAsArray[i]);
                      await uploadFile(content);

        }

    }

【问题讨论】：

你能在 for 循环之后直接 setState(completed) 吗？
我也是这么想的
@forresthopkinsa 我认为他想确保所有承诺都得到解决，没有人失败
如果他等待一个拒绝的promise，它会抛出一个错误并立即退出函数。

标签： javascript arrays reactjs for-loop

【解决方案1】：

for (let i = 0; i < filesAsArray.length; i++) {                       

      const content = await readContent(filesAsArray[i]);
                      await uploadFile(content);
                 if(i===filesArray.length-1){
                     setState(......)
                  }


    }

【讨论】：

这确实有效，也是我最初打算做的，但我不确定这是否是最有效的方法。它现在似乎工作正常。谢谢！
if 语句将仅在 resolving two awaits 之后运行。在最后一次迭代中，i===arr.length-1。在 awaits 之后写 if 意味着所有迭代都结束了
完美，这很有意义。谢谢你的解释！

【解决方案2】：

您可以为循环创建一个promise，当循环完成时，您以这种方式解决promise，您将仅在它实际完成时设置完成。

const loop = new Promise((resolve, reject) => {
  for (let i = 0; i < 1000; i++) {                       // DO it
      console.log(i)
  };
  resolve('Done');
});

loop.then((successMessage) => {
  console.log("Yay! " + successMessage) 
});

这里是一个小例子

【讨论】：