从 firebase 存储中检索图像以显示在组件中
retrieving images from firebase storage to show in a component
我试图从我的 firebase 存储中的文件夹中检索我的图像,我尝试将 URL 存储在一个数组中,然后尝试映射并使用 URL s 将它们呈现在一个组件中,但我无法这样做。
我已经尝试了多次尝试但无法弄清楚为什么,我相信这是一个尚未解决但又无法解决的承诺。
像这样的 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()
方法也是 returns 一个承诺,因此您需要等待它在调用 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>
)
}
我试图从我的 firebase 存储中的文件夹中检索我的图像,我尝试将 URL 存储在一个数组中,然后尝试映射并使用 URL s 将它们呈现在一个组件中,但我无法这样做。 我已经尝试了多次尝试但无法弄清楚为什么,我相信这是一个尚未解决但又无法解决的承诺。 像这样的 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()
方法也是 returns 一个承诺,因此您需要等待它在调用 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>
)
}