javascript - 在第一次渲染时将数组的状态映射到空数组上。（React js、Redux 传奇、Firebase 存储）

Question

编辑---已解决

终于想通了。forEach 循环不是异步的，我用传统循环替换了它，这解决了我的问题！

export const listImagesSagafied = async (listRef) => {
 const list = await listRef.listAll(); const listItems = list.items; const imgList = [];
for (let i = 0; i < list.items.length; i++) {
    const galleryImage = {}
    const downloadUrl = await listItems[i].getDownloadURL()
    galleryImage.name = listItems[i].name
    galleryImage.url = downloadUrl
    imgList.push(galleryImage)
}

return imgList;
};

下面的原始问题

目标：从 firebase 存储中获取图片 url，并在图库页面打开时将它们列在“图库”页面中。

问题：单击图库会导致空白页面，但再次单击它将呈现图像。单击联系人然后返回图库将再次在图库中呈现空白页面。视频https://vimeo.com/583902534

问题：我怎样才能使它在单击“画廊”导航按钮时呈现画廊图像？

下面的代码，我试图使其尽可能简洁，而不遗漏任何与问题相关的代码。

画廊组件

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { fetchGalleryStart } from '../../redux/gallery/gallery.actions';

import './gallery.styles.css';

const Gallery = () => {
    const dispatch = useDispatch();
    const gallery = useSelector(state => state.gallery.galleryImages);

    useEffect(() => {
        dispatch(fetchGalleryStart('test-images'))
    }, [])

    return (
        <div>
            <div className='page center-page'>

                {<h1>Gallery Length: {gallery.length}</h1>}
                {gallery &&
                    gallery.map((img) => (
                        <div key={img.name} className='gallery-image-container'>
                            <img src={img.url} alt={img.name}></img>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

减少行动

import GalleryActionTypes from './gallery.types';

export const fetchGalleryStart = (storageRef) => ({
    type: GalleryActionTypes.FETCH_GALLERY_START,
    payload: storageRef,
})

export const fetchGallerySuccess = (galleryItems) => ({
    type: GalleryActionTypes.FETCH_GALLERY_SUCCESS,
    payload: galleryItems,
})

export const fetchGalleryFailure = (error) => ({
    type: GalleryActionTypes.FETCH_GALLERY_FAILURE,
    payload: error,
})

REDUX 减速机

    import GalleryActionTypes from './gallery.types';
    
    const INITIAL_STATE = {
        galleryImages: null,
        isFetching: false,
        error: null,
    }
    
    const galleryReducer = (state = INITIAL_STATE, action) => {
        switch (action.type) {
            case GalleryActionTypes.FETCH_GALLERY_START:
                return {
                    ...state,
                    isFetching: true,
                }
    
            case GalleryActionTypes.FETCH_GALLERY_SUCCESS:
                return {
                    ...state,
                    isFetching: false,
                    galleryImages: action.payload,
                }
            case GalleryActionTypes.FETCH_GALLERY_FAILURE:
                return {
                    ...state,
                    isFetching: false,
                    error: action.payload,
                }
    
            default: return state;
        }
    };

export default galleryReducer;

REDUX 传奇

import { put, takeLatest, call, all } from 'redux-saga/effects';

import GalleryActionTypes from './gallery.types';
import { fetchGallerySuccess, fetchGalleryFailure } from './gallery.actions';
    import { firestorage, listImagesSagafied } from '../../firebase/firebase-utils';
    
    function* getGalleryItems({ payload }) {
        try {
            const storageRef = firestorage.ref();
            const listRef = yield storageRef.child(payload);
            const images = yield call(listImagesSagafied, listRef)
    
            yield put(fetchGallerySuccess(images));
        } catch (error) {
            yield put(fetchGalleryFailure(error));
        }
    };
    
    export function* fetchGalleryItemsStart() {
        yield takeLatest(GalleryActionTypes.FETCH_GALLERY_START, getGalleryItems);
    };
    
    export function* gallerySagas() {
        yield all([
            call(fetchGalleryItemsStart),
        ])
    };

用于获取存储项目的 FIREBASE 功能

export const listImagesSagafied = (listRef) => {
    const imgList = []
    listRef.listAll()
        .then((res) => {
            res.items.forEach((itemRef) => {
                const shopItem = {};
                shopItem.name = itemRef.name;

                itemRef.getDownloadURL()
                    .then((url) => {
                        shopItem.url = url
                        imgList.push(shopItem)
                    })
            });
        })
        .catch((error) => { console.log(error) });

    return imgList;
};

标签： javascriptreactjsreduxfirebase-storage