this.setState() 不渲染获取的 Firebase 图片

Question

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

Answer 1

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

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

this.setState() 不渲染获取的 Firebase 图片

this.setState() doesn't render fetched Firebase pictures

fetch

setstate

firebase

reactjs