reactjs - this.setState() 不呈现获取的 Firebase 图片
问题描述
我正在尝试从 Firebase 存储中获取所有图片。
使用 _loadImages 函数可以正常获取,但未显示获取的图像。
我对 React 和 React Native 有同样的问题。
几天以来我一直在尝试,但它只是不会重新渲染图像。
有人知道如何重新渲染获取的图像吗?
import React, { Component } from 'react';
import Firebase from '../functions/Firebase'
class Images extends Component {
constructor(props) {
super(props)
Firebase.init();
this.state = {
imageUrl: "",
imageArray: [
"https://images.unsplash.com/photo-1571831284707-b14ca2e0da5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1494537176433-7a3c4ef2046f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1579170130266-b77007d32ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1565047946982-5ca5149ce14c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
],
loading: false,
}
}
_loadImages = () => {
const imageArray = []
var storage = Firebase.storage
var storageRef = storage.ref()
var listRef = storageRef.child("images/")
listRef.listAll().then((res) => {
res.items.map((itemRef) => {
var urlFB = itemRef.name
var getPictureURL = 'images/'.concat(urlFB)
var starsRef = storageRef.child(getPictureURL)
starsRef.getDownloadURL().then((url) => {
imageArray.push(url)
})
})
})
this.setState({ imageArray })
}
_localLoadImages = () => {
this.setState({ loading: true })
this._loadImages()
this.setState({ loading: false })
}
handleUpload = (e) => {
e.preventDefault();
}
render() {
let imageUrlArray = this.state.imageArray
const images = imageUrlArray.map((item, i) => {
return (
<img
className="SingleImage"
src={item}
key={item}></img>
)
})
return (
<div className="Images" >
{images}
<button type='button' onClick={() => this._localLoadImages()}>Load Images!</button>
</div >
);
}
}
解决方案
您正在将其设置为异步函数执行完成之前的状态。
_loadImages = () => {
const imageArray = []
var storage = Firebase.storage
var storageRef = storage.ref()
var listRef = storageRef.child("images/")
listRef.listAll().then((res) => {
res.items.map((itemRef) => {
var urlFB = itemRef.name
var getPictureURL = 'images/'.concat(urlFB)
var starsRef = storageRef.child(getPictureURL)
starsRef.getDownloadURL().then((url) => {
imageArray.push(url)
this.setState({ imageArray })
})
})
})
}
或与async/await
,
_loadImages = async () => {
const imageArray = []
const storage = Firebase.storage
const storageRef = storage.ref()
const listRef = storageRef.child("images/")
const list = await listRef.listAll();
list.items.map((itemRef) => {
var urlFB = itemRef.name
var getPictureURL = 'images/' + urlFB;
var starsRef = storageRef.child(getPictureURL)
const url = starsRef.getDownloadURL();
imageArray.push(url);
});
this.setState({ imageArray });
}
推荐阅读
- django - 为具有多对多字段的现有对象批量添加对象
- python - python:将结构化但分散的数据转换为网格数据而不进行插值 - 快速
- javascript - ASP.NET Core Razor 无法从 javascript ajax 调用访问控制器
- ajax - 使用 ajax 的实时聊天弹出通知
- asp.net-core - 如何在 .NET Core Web API 中实现 ReadOnly Swagger 属性?
- java - 类不是抽象的,不会覆盖抽象方法简单代码
- reactjs - react + socket.io socket.on 事件未正确更新状态
- python - 在 pandas 中使用 read_csv 时忽略双引号 (")
- python - 使用 RectBivariateSpline 进行图像平滑
- angular - Angular-10中的Syncfusion网格单元条件格式