我正在尝试从Firebase存储器中的文件夹中检索图像，我试图将URL存储在数组中，然后尝试映射并使用URL将其呈现在组件中，但是我无法做所以。我已经尝试了多次，但不知道为什么，我相信这是一个尚未解决的承诺，但又一次无法实现。这样的id会在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>
)
}
我想你快到了。该getDownloadURL()方法还会返回一个Promise，因此您需要等待该Prok解析后才能调用setImgData：
newImg.then((res) => {
res.items.map((item)=> {
item.getDownloadURL().then((url) => {
setImgData([...imgData, url]);
});
})
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句