当试图拉取数组时，数据总是空的。有人知道我哪里错了吗？我检查了控制台，据我所知有一个对FireBase存储的引用，但没有数据。但我有4个文件在存储应该输出URL链接。这是我的组件
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;`上面的组件是我尝试过的，并期待一个列表的链接Map，但没有得到任何数据显示。pdfUrls总是空的。
1条答案
按热度按时间t2a7ltrp1#
问题就在这里：
listAll和getDownloadURL都是异步操作，可能需要一些时间才能完成。主代码不会阻塞整个脚本，而是在操作发生时继续运行，然后在数据（文件列表或下载URL）可用时执行回调块。这意味着您的
setPdfUrls(urls);在任何urls.push(url);运行之前运行，这将设置一个空列表。我建议在调试器中检查这个问题，或者添加一些日志记录。最简单的解决方法是将
setPdfUrls(urls);移入内部回调：现在它将在确定每个下载URL后调用。这会执行多次更新，因此可能会导致UI中出现一些 Flink ，但数据现在应该会显示出来。
在等待一切完成的同时只调用
setPdfUrls(urls);需要更多的工作。最简单的方法可能是将整个useEffect处理程序标记为async，并在其中使用await：这段代码：
await确保异步操作在调用setPdfUrls之前完成。for...of循环来确保我们可以在该循环中使用await。