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

【问题标题】：TypeError: Cannot destructure property 'cartItems' of 'cart' as it is undefinedTypeError：无法解构“cart”的属性“cartItems”，因为它未定义
【发布时间】：2020-07-08 15:49:28
【问题描述】：

再次在同一个教程中，我在购物车中有一个新问题我对使用 react redux 还是新手，所以感谢任何帮助解释我正在创建订购和计数的产品列表（之后）以便能够修改它们添加或取消

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

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;

【问题讨论】：

标签： reactjs redux

【解决方案1】：

需要一个默认值。在 store 的顶级模块中的某个地方：

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

内部组件：

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

最好在 reducers 级别定义默认值。另一种方法是将 defaultValue 传递给createStore。

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

【讨论】：