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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Masalahnya di sini:
pdfRef.listAll().then((result) => { result.items.forEach((itemRef) => { itemRef.getDownloadURL().then((url) => { urls.push(url); }); }); setPdfUrls(urls);listAll和getDownloadURLIni 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并在其中使用awaitmemerlukan lebih banyak kerja. Cara paling mudah mungkin ialah menandai keseluruhan pengendaliuseEffectsebagaiasyncdan gunakanmenunggudi 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:
await确保异步操作在调用setPdfUrlsdilakukan sebelum ini.for...of循环来确保我们可以在该循环内使用await.