reactjs - 从 Firebase 存储中检索图像（使用 React）

Question

我正在尝试从我的 Firebase 存储中获取图像，以创建一个投资组合。它们位于不同的目录中（每个国家/地区一个）。目前，我得到了所有的 URL，但我的地图是空的，我不知道如何刷新我的功能组件！

这是一些代码：

//firebase.js        
export const getImages = (country) => {
        let images = [];
        firebase.storage().ref().child('Images/' + country).list().then(result => {
            // Loop over each item
            result.items.forEach(pics => {
                firebase.storage().ref().child(pics.fullPath).getDownloadURL().then((url) => {
                    console.log(url);
                    images = [...images, url]
                })
            });
            return images;
        })
    }
    
    export const getAllImages = () => {
        let allImages = [];
    
        allImages = [...allImages, getImages("France")];
        return allImages;
    }

我的组件：

import {getAllImages} from "../firebase/firebase.js";

function Gallery (props) {
    const country = props.country;
    const [data, setData] = useState([])
    
    useEffect( () => {
        let urls = getAllImages();
        console.log(urls);
        if (urls) {
            setData(urls);
        }
    },[country])

    const imagesRender = () => {
        if (data.length >= 1) {
            switch (country) {
                case 'France':
                    return (data[0].map((item, id) => (
                        <img key={id} src={item} alt=""/>
                    )));
                case 'Japan':
                    return (data[1].map((item, id) => (
                        <img key={id} src={item} alt=""/>
                    )));
                case 'South Korea':
                    return (data[2].map((item, id) => (
                        <img key={id} src={item} alt=""/>
                    )));
                default:
                    return (data.map((item, id) => (
                        <img key={id }src={item} alt=""/>
                    )));
            }
        }
    }

    return (
        <div className="col-8">
            <div>
                {imagesRender()}
            </div>
        </div>
    );
}

export default Gallery;

标签： reactjsfirebasefirebase-storage