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

Question

我正在尝试显示我存储在 firebase 云存储中的所有图像。虽然我可以在 console.log(fetchUrl) 的帮助下看到 links，但多亏了 Firebase Doc but I'm not able to display them on my screen. so I thought of using the useState method but still it doesn't work. I don't know why. I have seen one result that 但它的 firebase v8 和 v9 与此有很大不同。所以请帮帮我。如果你能帮我把上面的 v8 翻译成 v9，那将是很大的帮助 link。

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 以呈现它们。

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

How to display all images from firebase Storage in react js

javascript

jsx

reactjs

firebase-storage

react-hooks