javascript - react-dropzone を使用して複数のドロップをプレビューする

Question

アプリに Dropzone を実装しようとしていますが、写真が複数の入力としてドロップされている場合、写真をプレビューできません。それらを 1 つずつ追加すると問題なく動作しますが、複数選択すると最初の 1 つだけがレンダリングされます。

これは私の onDrop 関数です

onDropGeneral = (currentGeneralPhoto) => {
 let index;
 for (index = 0; index < currentGeneralPhoto.length; ++index) {
  const file = currentGeneralPhoto[index];
  this.setState({
    previewGeneralPhotos: this.state.previewGeneralPhotos.concat(file)
  });
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (event) => {
    console.log('URL: ', event.target.result);
    this.setState({
      generalPhotos: this.state.generalPhotos.concat([{ base64: event.target.result }])
    });
  };
 }
}

これは私のレンダリング方法です：

<h2>Dropped files</h2>
{this.state.previewGeneralPhotos.length > 0 ? <div>
  <h2>Preview {this.state.previewGeneralPhotos.length} files...</h2>
  <div>{this.state.previewGeneralPhotos.map((file) => <img src={file.preview} alt="preview failed" />)}</div>
 </div> : null}
 <h2> Upload {this.state.generalPhotos.length} Files </h2>

アップロード数は配列の適切なサイズを示していますが、プレビュー数はドロップされた最初の写真のみをカウントします