如何在反应js中显示来自firebase存储的所有图像

Question

我正在尝试显示我存储在 Firebase 云存储中的所有图像。虽然我可以在console.log(fetchUrl) 的帮助下看到链接，但感谢Firebase Doc，但我无法在我的屏幕上显示它们。所以我想到了使用 useState 方法，但它仍然不起作用。我不知道为什么。我见过matches my answer 的一个结果，但它的firebase v8 和v9 与此有很大不同。所以请在这里帮助我。 如果您能帮我从上面的链接翻译 v8 到 v9，那将是非常有帮助的。

const [url, setUrl] = useState([]);

useEffect(() => {

const overviewRef = ref(storage, `behance_projects/${params.id}/`);
listAll(overviewRef).then((res) => {
    res.items.forEach((imageRef) => {
        getDownloadURL(imageRef).then((fetchUrl) => {
            setUrl({
                urlLink: fetchUrl,
            })
        })
    })
}).catch((err)=> {
    console.log(err)
})
}, [params.id]);  

这就是我尝试在网络上展示的方式。

{
   url.map((url, index) =>{
     return <img src={url.urlLink} key={index} alt="images" style={{width:"100%", 
     height:"auto"}}/>
   })
}

Answer 1

虽然v9的模块化语法不同，但处理多个异步操作的方式还是一样的：使用Promise.all。

在你的情况下是这样的：

listAll(overviewRef).then((res) => {
    let promises = res.items.map((imageRef) => getDownloadURL(imageRef));
    Promise.all(promises).then((urls) => {
        setUrl({
            urlLink: urls,
        })
    })
}).catch((err)=> {
    console.log(err)
})

现在setUrl 将在确定所有下载 URL 后调用。然后，您可以在 JSX 中遍历这些 URL 以呈现它们。