TypeError：无法解构“cart”的属性“cartItems”，因为它未定义

Question

Again the same tutorial I have a new problem in the cart I am still new to using react redux so thanks for any help for explained I am creating the list of products ordered and counted (after) to be able to modify them added or canceled

TypeError: Cannot destructure property 'cartItems' of 'cart' as it is undefined.

import React, { useEffect } from 'react';
import { addToCart } from '../actions/cartActions';
import { useDispatch, useSelector } from 'react-redux';
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.length === 0 ?
            <div>
              Cart is empty
          </div>
            :
            cartItems.map(item =>
              <li>
                <div className="cart-image">
                  <img src={item.image} alt="product" />
                </div>
                <div className="cart-name">
                  <div>
                    Qty:
                  <select value={item.qty} onChange={(e) => dispatch(addToCart(item.product, e.target.value))}>
                      {[...Array(item.countInStock).keys()].map(x =>
                        <option key={x + 1} value={x + 1}>{x + 1}</option>
                      )}
                    </select>
                  </div>
                </div>
                <div className="cart-price">
                  ${item.price}
                </div>
              </li>
            )
        }
      </ul>
        </div>
        <div className="cart-action">

        </div>
    </div>
}
export default CartScreen;

Answer 1

A default value is needed. Somewhere at top-level modules of store:

const EMPTY_CART = { cartItems: [] }; // To ensure that default value is singleton and avoid useless re-renders

inside component:

const cart = useSelector(state => state.cart || EMPTY_CART);
const { cartItems } = cart;

It is better to define default values at reducers level. Another approach is to pass defaultValue to createStore .

https://redux.js.org/recipes/structuring-reducers/initializing-state