javascript - 从 Firebase 存储中检索图像以显示在组件中

Question

我正在尝试从我的 firebase 存储中的文件夹中检索我的图像，我尝试将 URL 存储在一个数组中，然后尝试映射并使用这些 URL 在组件中呈现它们，但我无法做到所以。我已经尝试了多次但无法弄清楚为什么，我相信这是一个尚未解决但又无法解决的承诺。当 ViewPhotos 组件加载时加载这样的 id。我会朝着完全错误的方向前进吗？

    const ViewPhotos = () => {
    const [imgData, setImgData] = useState([])

    let getData = () => {
        const storage = app.storage()
        const storageRef = storage.ref('test/')
        const newImg = storageRef.list()
        newImg.then((res) => {
            res.items.map((item)=> {
                let url = item.getDownloadURL()
                setImgData([...imgData, url])
            })
        })
        
    }

    const ListDisplay = ({ url }) => {
        return (
            <div>
                <img src={url}/>
            </div>
        )
    }
    useEffect(() => {
            getData()
    },[])

        return(
            <div id="viewPhotos">
                <h3>view photos component</h3>
                <div>
                {imgData.map(url => {
                    return <ListDisplay url={url} />
                })}
                </div>
            </div>
        )
}

标签： javascriptreactjsfirebasefirebase-storageuse-state

Answer 1

我想你快到了。该getDownloadURL()方法还返回一个承诺，因此您需要在调用之前等待它解决setImgData：

newImg.then((res) => {
    res.items.map((item)=> {
        item.getDownloadURL().then((url) => {
            setImgData([...imgData, url]);
        });
    })
})