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

Question

私はアプリケーションにDropzoneを実装しようとしていますが、複数の入力としてドロップされている場合はプレビューできません。私はそれらを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 }]) 
    }); 
    }; 
} 
} 

であり、これは私のrenderメソッドです：

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

アップロード数は、配列の正しいサイズを示しているが、プレビューのみカウントが第一の写真をカウント

Answer 1

setStateは非同期である可能性があります。

this.setState(({ previewGeneralPhotos }) => ({ 
    previewGeneralPhotos: previewGeneralPhotos.concat(file) 
})) 

これは、あなたが誤ってpreviewGeneralPhotosの前の値を上書きしないことを確認し、あなたが意図したとおり、あなたが実際に既存のアレイに追加します。あなたのonDropGeneral関数内で次のようにして、setState用関数コールバックを使用する必要があります。

他の提案のカップル：

• は、あなたのimg要素が鍵を持っていることを確認してください。
• onDropGeneralメソッドが呼び出されるたびに新しいコンポーネントを作成するのではなく、コンポーネント全体に対してファイルリーダーのインスタンスを使用します。 'load'イベントのイベントリスナーをcomponentDidMountに添付し、そのリスナーをcomponentWillUnmountに削除することができます。少なくとも、イベントリスナーをのreader.readAsDataURLの前に付けるのが最善の方法です。