react-redux页面未显示，仅空白页面

Question

我正在通过这个名为Basir编码的家伙课程来制作有关如何建立电子商务网站的教程， 基本上我在购物车部分有问题，它不会在购物车页面上显示任何内容，只是空白页面，而且在Redux DevTools上也显示，我仔细检查了代码，看不到任何内容，也没有错误显示。它必须是显而易见的东西，我看不到，所以将不胜感激。 这就是我得到的：

代码：

购物车Screen.js：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addToCart } from '../actions/cartActions';

function CartScreen(props){
    const cart = useSelector(state => state.cart);

    const { cartItems }= cart;
    const productId = props.match.params.id;
    const qty = props.location.search ? Number(props.location.search.split("=")[1]):1;
    const dispatch = useDispatch();

    useEffect(() =>{
        if(productId){
            dispatch(addToCart(productId, qty));
        }
    }, [])

    return<div className="cart">
        <div className="cart-list">
            <ul className="cart-list-container">
                <li>
                    <h3>
                        Shopping Cart
                    </h3>
                    <div>
                        Price
                    </div>
                    
                 </li> 
                    {
                        cartItems.lenght ===0 ?
                        <div>
                            Cart is empty
                        </div>
                        
                        :
                        cartItems.map(item =>
                            <div>
                                <img src={item.image} alt="product"/>
                                <div className="cart-name">
                                    <div>
                                        {item.name}
                                    </div>
                                </div>
                                <div>
                                    :Qty
                                    <select>
                                        <option valu="1">1</option>
                                        <option valu="2">2</option>
                                        <option valu="3">3</option>
                                    </select>
                                </div>
                                <div>
                                   {item.price}
                                </div> 
                            </div>
                          
                        )
                    }
                
            </ul>

        </div>
        <div className="cart-action">
                <h3>
                    Subtotal({cartItems.reduce((a, c) => a + c.qty, 0)} items)
                    :
                    ${cartItems.reduce((a, c) => a + c.price * c.qty, 0)}
                </h3>
                <button className="button primary" disabled={cartItems.lenght===0}>
                    Proceed to Checkout
                </button>
        </div>
    </div>
}
export default CartScreen;

cartActions.js：

import axios from 'axios';
import React from 'react'
import { CARD_ADD_ITEM } from '../constants/cartConstants';

const addToCart = (productId, qty) => async (dispatch) =>{
    
    try {
        const {data} = await axios.get("/api/products/" + productId);
        dispatch({
            type: CARD_ADD_ITEM, payload:{
            product: data._id,
            name: data.name,
            image: data.image,
            price: data.price,
            countInStock: data.countInStock,
            qty
        }});
    } catch (error) {
        
    }
}

export {addToCart}

cartReducers.js：

import React from 'react'
import { CARD_ADD_ITEM } from "../constants/cartConstants";

function cartReducer(state= {cartItems:[] }, action) {
    switch(action.type){
        case CARD_ADD_ITEM:
            const item = action.payload;
            const product = state.cartItems.find(x => x.product === item.product);
            if(product){
                return {
                    cartItems: 
                    state.cartItems.map(x => x.product === product.product? item: x)
                };

            }
            return { cartItems: [...state.cartItems, item]};
            default:
                return state
    }
}

export { cartReducer }

store.js：

import {createStore, combineReducers, compose, applyMiddleware} from 'redux';
import {productDetailsReducer, productListReducer} from './reducers/productReducers';
import thunk from 'redux-thunk';
import {cartReducer} from './reducers/cartReducers';

const initialState= {};
const reducer = combineReducers({
    productList: productListReducer,
    productDetails: productDetailsReducer,
    cart: cartReducer
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, initialState, composeEnhancer(applyMiddleware(thunk)));
export default store;

这是他的仓库https://github.com/basir/node-react-ecommerce/tree/master/frontend/src