Firebase存储:将图像下载到React map中的img src
Firebase存储:将图像下载到React map中的img src
提问于 2020-04-13 23:15:00
我正在尝试映射数组，以便从Firebase存储中获取图像url，并将它们列出到页面。代码给了我一个url，但问题是代码没有及时将url设置为img变量，并返回空的img变量。
return(
<div>
<Header />
{this.state.loaded ? <Loading /> : null}
<div>
{this.state.productsArr.map((product, i) => {
let img = '';
storageRef.child(`images/${product.images[0]}`)
.getDownloadURL()
.then((url) => {
img = url
console.log('then img', img)
})
.catch((err) => console.log(err))
console.log('result',img)
return(
<div key={i}>
<div>
<div>
<img src={img}
alt={product.category}
/>
</div>
</div>
</div>
)
})}
</div>
<Footer />
</div>
)我哪里搞错了？也会得到两次结果。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-14 00:17:13
调用getDownloadURL()意味着SDK必须调用服务器才能获得该URL。当调用从服务器返回下载URL时，<img src={img}已经运行很长时间了。
因此，您需要将下载URL存储在状态中，然后在render方法中使用状态中的URL。
通常，您将开始在componentWillMount方法中加载数据：
componentWillMount() {
let promises = this.state.productsArr.map((product, i) => {
return storageRef.child(`images/${product.images[0]}`).getDownloadURL();
});
Promise.all(promises).then((downloadURLs) => {
setState({ downloadURLs });
});
}当您调用setState()时，React将自动重新呈现依赖于已修改状态的UI部件。因此，在您的呈现方法中，您将使用来自state.downloadURLs的下载URL。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61190939
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号