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.
Masalahnya di sini:
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: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 pengendaliuseEffect
sebagaiasync
dan gunakanmenunggu
di dalamnya:Jadi kod ini:
await
确保异步操作在调用setPdfUrls
dilakukan sebelum ini.for...of
循环来确保我们可以在该循环内使用await
.