从 Firebase 存储中检索图像以显示在组件中答案

【问题标题】：retrieving images from firebase storage to show in a component从 Firebase 存储中检索图像以显示在组件中
【发布时间】：2021-05-20 21:15:39
【问题描述】：

我正在尝试从我的 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>
        )
}

【问题讨论】：

标签： javascript reactjs firebase firebase-storage use-state

【解决方案1】：

我想你快到了。 getDownloadURL() 方法也返回一个 promise，所以你需要等待它解决后再调用 setImgData：

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

【讨论】：

感谢这确实为我指明了正确的方向，旧数组和新项目没有连接，我意识到每次重新渲染时都会再次添加网址。经过几次调整后，我得到了它的工作。但不确定它是最实用的。再次感谢

【解决方案2】：

经过几次调整后，我得到了我想要的结果，我的数组和新项目没有连接，每次重新渲染后它都会再次添加相同的 url。更多的建议会很好，但案例已结束。

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)=> {
                item.getDownloadURL().then((url) => {
                    imgData.includes(url) ?
                        console.log('url already there') :
                        setImgData(imgData => [...imgData, url])
                })
            })
        })   
    }
    
    const ListDisplay = ({ url }) => {
        return (
            <div className="listDisplayWrapper">
                <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>
        )
}

【讨论】：