Saya cuba menarik senarai pautan muat turun dari storan firebase untuk dipaparkan dalam komponen React/nextjs saya

Question

Apabila cuba menarik tatasusunan, data sentiasa kosong. Adakah sesiapa tahu di mana silap saya? Saya menyemak konsol dan sejauh yang saya tahu terdapat rujukan kepada storan firebase tetapi tiada data. Tetapi terdapat 4 dokumen dalam storan saya yang harus mengeluarkan pautan URL. Ini adalah komponen saya

import React, { useState, useEffect } from 'react';

// i'm initializing firebase with firebase.initializeApp(firebaseConfig)
import { projectStorage } from '@/firebaseConfig'; 
 // projectStorage is =         firebase.storage();


const PDFViewer = () => {
  const [pdfUrls, setPdfUrls] = useState();

  useEffect(()=>{
   const storageRef = projectStorage.ref();
   const pdfRef = storageRef.child('myfirebaselocationpath/uploadeddocs/'); 
   const urls = [];
   pdfRef.listAll().then((result) => {
    result.items.forEach((itemRef) => {
    itemRef.getDownloadURL().then((url) => {
      urls.push(url);
    });
  });
  setPdfUrls(urls);
}).catch((error) => {
  console.error('Error retrieving PDF files:', error);
});
},[])
console.log(pdfUrls)
/*  console.log( pdfUrls.map((url) => {
return url
 })
) */
return (
<div>
  <h1>PDF Viewer</h1>
  {pdfUrls.map((url) => (
    <iframe key={url} src={url} width="100%" height="600px" />
  ))}
</div>
 );
};

export default PDFViewer;`

Komponen di atas adalah yang saya cuba dan jangkakan senarai peta yang dipautkan, tetapi tiada data dipaparkan. Dan pdfUrls sentiasa kosong.

Answer 1

Masalahnya di sini:

pdfRef.listAll().then((result) => {
  result.items.forEach((itemRef) => {
  itemRef.getDownloadURL().then((url) => {
    urls.push(url);
  });
});
setPdfUrls(urls);

listAll 和 getDownloadURL Ini semua adalah operasi tak segerak dan mungkin mengambil sedikit masa untuk diselesaikan. Kod utama tidak menyekat keseluruhan skrip, tetapi meneruskan pelaksanaan semasa operasi berlaku - dan kemudian melaksanakan blok panggil balik apabila data (senarai fail atau URL muat turun) tersedia.

Ini bermakna setPdfUrls(urls); 在任何 urls.push(url); anda dijalankan sebelum ini, dan ini menetapkan senarai kosong. Saya syorkan menyemak ini dalam penyahpepijat, atau menambah beberapa pengelogan.

---

Cara paling mudah untuk menyelesaikan masalah adalah dengan memindahkan setPdfUrls(urls); ke panggilan balik dalaman:

pdfRef.listAll().then((result) => {
  result.items.forEach((itemRef) => {
  itemRef.getDownloadURL().then((url) => {
    urls.push(url);
    setPdfUrls(urls);
  });
});

Kini ia akan dipanggil selepas setiap URL muat turun ditentukan. Ini akan melakukan berbilang kemas kini, jadi ia mungkin menyebabkan beberapa kelipan dalam UI, tetapi data kini sepatutnya muncul.

---

Memanggilnya sekali sahaja sementara menunggu semuanya selesai setPdfUrls(urls); 需要做更多的工作。最简单的方法可能是将整个 useEffect 处理程序标记为 async 并在其中使用 await memerlukan lebih banyak kerja. Cara paling mudah mungkin ialah menandai keseluruhan pengendali useEffect sebagai async dan gunakan menunggu di dalamnya:

useEffect(() => async {
  const storageRef = projectStorage.ref();
  const pdfRef = storageRef.child('myfirebaselocationpath/uploadeddocs/');
  const urls = [];
  const result = await pdfRef.listAll();
  for (const itemRef of result.items) {
    const url = await itemRef.getDownloadURL();
    urls.push(url);
  }
  setPdfUrls(urls);
}, [])

Jadi kod ini:

• Gunakan await 确保异步操作在调用 setPdfUrls dilakukan sebelum ini.
• Gunakan for...of 循环来确保我们可以在该循环内使用 await.