Почему мой HTML не отображается, когда я перебираю заполненный массив?

Question

В настоящее время я работаю с реакцией, редуксом и пожарной базой, чтобы отобразить список доступных книг для продажи. Я успешно заполнил массив всей информацией, которую хочу отобразить, и обновил состояние для избыточности с помощью этой информации. Однако HTML не меняется с пустого экрана.

Ниже приведен соответствующий код.

import React, { Component } from 'react';
import NavBar from './NavBar'
import {populate} from '../actions'
import {useSelector, useDispatch} from 'react-redux' 


const ItemList = () => {
    const itemList = useSelector(state => state.listReducer);
    const dispatch = useDispatch();
    if (!itemList.isLoaded) {
        dispatch(populate());
    }


    //Displays all items for sale
    return( 
        <div>
          <header>
              <div className='wrapper'>
              </div>
          </header>
          <div className='container'>
            <section className='display-item'>
                <div className="wrapper">
                  <ul>
                    {itemList.isLoaded ? itemList.items.map((item) => {
                      return (
                        <li key={item.id}>
                          <h3 key={item.title}>{item.title}</h3>
                          <p key={item.author}>Author: {item.author}
                            <button key={"button:" + item.id}>See item details</button>
                          </p>
                        </li>
                      )
                    }) : null}
                  </ul>
                </div>
            </section>
          </div>
        </div>
      );
}

export default ItemList

Код редуктора ниже

const initialState = {
    items: [],
    isLoaded: false,
}


const listReducer = (state=initialState,action) => {
    switch (action.type) {
        case 'POPULATE-LIST':
            return {   
                items: action.payload,
                isLoaded: true,
            }

        case 'ADD-ITEM':
            let newState = state.slice();
            newState.push(action.payload);
            return newState


        default: {
            return state;
        }
    }
}

Действие метод ниже

export const populate = () => (
    dispatch, 
    getState, 
    {getFirebase}) => {
        const firebase = getFirebase();
        let items = [];
        const itemsRef = firebase.firestore().collection("items").doc("all-items").collection("books");
        itemsRef.get().then(documentSnapshot => {
            documentSnapshot.forEach(doc => {
            const item = doc.data();
            items.push(item);            
            })   
        }).then(dispatch({type: 'POPULATE-LIST', payload: items}))

    }

Кроме того, в настоящее время я также использую redux-thunk

Answer 1

Попробуйте поместить 'let items' в вызов обещания в firebase, а затем вместо того, чтобы отправлять отправку в отдельном обещании, поместите его вне forEach l oop, но в пределах первоначального обещания. Код будет выглядеть так:

export const populate = () => (
    dispatch, 
    getState, 
    {getFirebase}) => {
        const firebase = getFirebase();
        const itemsRef = firebase.firestore().collection("items").doc("all-items").collection("books");
        itemsRef.get().then(documentSnapshot => {
            const items = [];
            documentSnapshot.forEach(doc => {
                const item = doc.data();
                items.push(item);            
            })
            dispatch({type: 'POPULATE-LIST', payload: items})
        });

    } ```