Reactjs 此.setState（）不'；t渲染获取的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 >
        );
    }
}

import React，{Component}来自'React'；
从“../functions/Firebase”导入Firebase
类图像扩展组件{
建造师（道具）{
超级（道具）
Firebase.init（）；
此.state={
imageUrl:“”，
图像阵列：[
"https://images.unsplash.com/photo-1571831284707-b14ca2e0da5f?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60“，
"https://images.unsplash.com/photo-1494537176433-7a3c4ef2046f?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60“，
"https://images.unsplash.com/photo-1579170130266-b77007d32ab5?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60“，
"https://images.unsplash.com/photo-1565047946982-5ca5149ce14c?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60“，
],
加载：false，
}
}
_loadImages=（）=>{
常量imageArray=[]
var storage=Firebase.storage
var storageRef=storage.ref（）
var listRef=storageRef.child（“images/”）
listRef.listAll（）。然后（（res）=>{
res.items.map（（itemRef）=>{
var urlFB=itemRef.name
var getPictureURL='images/'.concat（urlFB）
var starsRef=storageRef.child（getPictureURL）
starsRef.getDownloadURL（）。然后（（url）=>{
imageArray.push（url）
})
})
})
this.setState（{imageArray}）
}
_localLoadImages=（）=>{
this.setState（{loading:true}）
这是。_loadImages（）
this.setState（{loading:false}）
}
handleUpload=（e）=>{
e、 预防默认值（）；
}
render（）{
让imageUrlArray=this.state.imageArray
const images=imageUrlArray.map（（项目，i）=>{
返回(
)
})
返回(
{图像}
这是。_localLoadImages（）}>加载图像！
);
}
}

您正在将其设置为异步函数执行完毕之前的状态

_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 })
                })
            })
        })

    }

或者使用

异步/等待

_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 });
    }

---

它就是这样工作的！非常感谢你。但现在我们多次覆盖状态。在获取整个数组后，只覆盖一次不是更好吗？你能告诉我为什么即使状态被更新，并且我使用另一个按钮forcedUpdate（this.forceUpdate（））时它也不工作吗？这是由于执行的同步性。Javascript一次性执行整个函数。异步函数（firebase调用）仅在稍后时间解析。应尽量避免使用forceUpdate。我假设您正在重新提交组件，因为这一行

让imageUrlArray=this.state.imageArray

。尝试在componentDidMount函数中执行此操作。非常感谢各位！我非常感谢你的回答