問題タブ [react-dropzone]

コンポーネントのドキュメント アップロード セクションでの作業。ユーザーはファイルをドロップしてアップロードできます。ドロップ領域の下には、送信、キャンセル ボタン、および送信するファイルのリストがあります。キャンセル ボタンは、files配列をクリアする必要があります。

ただし、最初にクリックすると、ファイルがまだ存在するため、ファイル名が出力されます。もう一度クリックすると、ファイルが消去されます。なぜこれが起こるのか分かりません。

問題の関数はhandleClick(event).

興味深いことに、ページにレンダリングされているファイルのリストはクリアされますが、配列console.logはhandleClick(event).

フォルダーの内容をfirebaseにアップロードしようとしていますが、いくつかのエラーが発生しています。

私はreact-dropzoneを次のように使用しています:

私の「handleDrop」関数で。

onDrop(acceptedFiles, rejectFiles) {acceptedFiles.forEach(file => {var storageRef = firebase.storage(); var fileRef = storageRef.ref(file.name); fileRef.put(file) .then(関数 (スナップショット) { console.log('ブロブまたはファイルをアップロードしました!'); }) .catch((e) => { }); }); }

firebase が最大再試行回数でエラーになるまで、「net::ERR_FILE_NOT_FOUND」というエラーが発生します。

Rails APIのみのバックエンドとともにReactフロントエンドを構築しました。ユーザーがタスクを作成し、タイトル、説明を入力し、画像をアップロードできるようにしたいと考えています。

そのため、DropZone を使用して画像にアクセスし、Axios を使用した投稿リクエストを介して、タイトルと説明とともに画像情報を Rails API に送信しようとしました。

投稿リクエストごとにタスクがデータベースに追加されたら、AWS S3 バケットにアップロードすることを期待して、Rails API に Carrierwave をセットアップしました。

これはどれも機能していないので、私の質問は、反応側でAWSにアップロードする画像を処理する必要がありますか?もしそうなら、その画像をRailsデータベースに保存している追加情報(タイトルと説明)に関連付けるにはどうすればよいですか? ）。

ありがとう！