Javascript 从firebase存储中检索要在组件中显示的图像

我试图从firebase存储中的文件夹中检索图像，我尝试将URL存储在数组中，然后尝试映射并使用URL在组件中呈现它们，但我无法这样做。 我尝试了多次尝试，但不知道为什么，我相信这是一个承诺，尚未解决，但再次，无法解决它。 我希望在加载ViewPhotos组件时加载此文件。 我是不是走错了方向

    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>
        )
}

const ViewPhotos=（）=>{
常量[imgData，setImgData]=useState（[]）
让getData=（）=>{
const storage=app.storage（）
const storageRef=storage.ref（'test/'））
const newImg=storageRef.list（）
newImg.then（（res）=>{
res.items.map（（项目）=>{
让url=item.getDownloadURL（）
setImgData（[…imgData，url]）
})
})
}
const ListDisplay=（{url}）=>{
返回(
)
}
useffect（（）=>{
getData（）
},[])
返回(
查看照片组件
{imgData.map（url=>{
返回
})}
)
}

我想你就快到了。

getDownloadURL（）

方法也会返回一个承诺，因此在调用

setImgData

之前需要等待该承诺得到解决：

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

---

经过几次调整后，我得到了我想要的结果，我的数组和新项目没有连接，每次重新呈现后，它会再次添加相同的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>
        )
}

const ViewPhotos=（）=>{
常量[imgData，setImgData]=useState（[]）
让getData=（）=>{
const storage=app.storage（）
const storageRef=storage.ref（'test/'））
const newImg=storageRef.list（）
newImg.then（（res）=>{
res.items.map（（项目）=>{
item.getDownloadURL（）。然后（（url）=>{
imgData.includes（url）？
console.log（'url已存在'）：
setImgData（imgData=>[…imgData，url]）
})
})
})   
}
const ListDisplay=（{url}）=>{
返回(
)
}
useffect（（）=>{
getData（）
},[])
返回(
查看照片组件
{imgData.map（url=>{
返回
})}
)
}

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