遍历文件 url 数组并使用 React 下载每个文件答案

【问题标题】：Loop through array of file urls and download each one with React遍历文件 url 数组并使用 React 下载每个文件
【发布时间】：2017-09-30 15:06:21
【问题描述】：

我正在尝试做我“认为”很简单的任务。我有一组 URL，当用户单击按钮时，我想循环并下载到客户端计算机上。

现在我有一个父组件，其中包含我想要循环下载的按钮和一组 url（处于状态）。出于某种原因，我现在的做法只下载其中一个文件，而不是数组的所有内容。

知道如何在 React 中正确执行此操作吗？

handleDownload(event){
        var downloadUrls = this.state.downloadUrls;
        downloadUrls.forEach(function (value) {
            console.log('yo '+value)
        const response = {
              file: value,
        };                
            window.location.href = response.file;

        })
    }

【问题讨论】：

为什么要在 downloadUrls 上调用 slice？
因为我所在的州有一组 URL。 downloadUrls = ["file1", "file2", "file3"]。用户可以在单击父级“下载所有选定的文件”按钮之前选中他们想要下载的文件的复选框。
这不是答案。调用 slice 的用途或意义是什么？你想在那里完成什么？

标签： javascript arrays reactjs download

【解决方案1】：

我会使用 setTimeout 在下载每个文件之间稍等片刻。

handleDownload(event){
    var downloadUrls = this.state.downloadUrls.slice();
    downloadUrls.forEach(function (value, idx) {
        const response = {
          file: value,
        };
        setTimeout(() => {
            window.location.href = response.file;
        }, idx * 100)
    })
}

在 Chrome 中，这也会提示要求下载多个文件的权限。

【讨论】：