为什么我的 HTML 在我遍历填充的数组时不显示？

Question

我目前正在使用 React、redux 和 firebase 来显示可供出售的书籍列表。我已经成功地用我想要显示的所有信息填充了一个数组，并用这些信息更新了 redux 的状态。但是，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

reducer 代码如下

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 的 promise 调用中，然后不要将调度放在单独的 promise 中，而是将其放在 forEach 循环之外但在初始 promise 之内。代码将如下所示：

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

    } ```

为什么我的 HTML 在我遍历填充的数组时不显示？

Why does my HTML not display when I iterate through the populated array?

javascript

reactjs

react-redux-firebase