ファイルURLの配列をループし、それぞれのファイルをダウンロードしてください。

Question

私は思ったことをやろうとしていますが、簡単な作業です。ユーザーがボタンをクリックすると、ループしてクライアントマシンにダウンロードしたいURLの配列があります。

今私は、ボタンと、ループしてダウンロードしたい状態のURLの配列を含む親コンポーネントを持っています。何らかの理由で、私が今やっているやり方は、配列の内容のすべてではなく、ファイルのうちの1つだけをダウンロードするようになっています。

リアクション内で正しくこれを行うにはどうすればよいですか？

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

     }) 
    } 

Answer 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では、複数のファイルのダウンロードを求めるアクセス許可も表示されます。