我正在尝试从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 });
}