当尝试拉取数组时，数据始终为空。有人知道我哪里出错了吗？ 我检查了控制台，据我所知，有一个对 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 ( PDF Viewer
{pdfUrls.map((url) => ( ))} ); }; export default PDFViewer;`
上面的组件是我尝试过的，并期望映射链接列表，但没有显示任何数据。并且 pdfUrls 始终为空。
问题出在这里：
pdfRef.listAll().then((result) => { result.items.forEach((itemRef) => { itemRef.getDownloadURL().then((url) => { urls.push(url); }); }); setPdfUrls(urls);listAll和getDownloadURL都是异步操作，可能需要一些时间才能完成。主代码不会阻塞整个脚本，而是在操作发生时继续执行 - 然后当数据（文件列表或下载 URL）可用时执行回调块。这意味着您的
setPdfUrls(urls);在任何urls.push(url);运行之前运行，并且这会设置一个空列表。我建议在调试器中检查这一点，或者添加一些日志记录。解决该问题的最简单方法是将
setPdfUrls(urls);移至内部回调：pdfRef.listAll().then((result) => { result.items.forEach((itemRef) => { itemRef.getDownloadURL().then((url) => { urls.push(url); setPdfUrls(urls); }); });现在它会在确定每个下载 URL 后调用。这会执行多次更新，因此可能会导致 UI 中出现一些闪烁，但数据现在应该会显示。
在等待一切完成的同时只调用一次
setPdfUrls(urls);需要做更多的工作。最简单的方法可能是将整个useEffect处理程序标记为async并在其中使用await：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); }, [])所以这段代码：
await确保异步操作在调用setPdfUrls之前完成。for...of循环来确保我们可以在该循环内使用await。