Firebaseストレージからダウンロードリンクのリストを取得してReact/nextjsコンポーネントに表示しようとしています

Question

配列をプルしようとすると、データは常に空になります。私のどこが間違っているのか誰か知っていますか？ コンソールを確認したところ、私の知る限り、Firebase ストレージへの参照はありますが、データはありませんでした。しかし、私のストレージには URL リンクを出力する必要があるドキュメントが 4 つあります。 これは私のコンポーネントです

リーリー

上記のコンポーネントは私が試したもので、リンクされたリストがマッピングされることを期待していましたが、データは表示されませんでした。そして、pdfUrls は常に空です。

Answer 1

問題はここにあります:

リーリー

listAll と getDownloadURL は非同期操作であるため、完了までに時間がかかる場合があります。メイン コードはスクリプト全体をブロックしませんが、操作が行われている間実行を継続し、データ (ファイル リストまたはダウンロード URL) が利用可能になったときにコールバック ブロックを実行します。

これは、任意の urls.push(url); が実行される前に setPdfUrls(urls); が実行され、空のリストが設定されることを意味します。デバッガーでこれを確認するか、ログを追加することをお勧めします。

---

問題を解決する最も簡単な方法は、setPdfUrls(urls); を 内部コールバックに移動することです:

リーリー

各ダウンロード URL が決定された後に呼び出されます。これにより複数の更新が実行されるため、UI に多少のちらつきが生じる可能性がありますが、データは表示されるはずです。

---

すべてが完了するのを待っている間に 1 回だけ呼び出すと、setPdfUrls(urls); より多くの作業が必要になります。おそらく最も簡単な方法は、useEffect ハンドラー全体を async としてマークし、その中で await を使用することです。 リーリー

つまり、このコードは次のとおりです:

#await
• を使用して、setPdfUrls を呼び出す前に非同期操作が完了していることを確認します。
for...of
• ループを使用して、ループ内で await を使用できるようにします。