Question

再次使用同一教程，我在购物车中遇到了一个新问题，我仍然对使用React Redux还是陌生的，因此感谢您的任何帮助，我正在创建已订购和计算（之后）的产品列表，以便能够对其进行修改。或取消

TypeError：无法解构“购物车”的属性“ 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;

Answer 1

需要一个默认值。在商店的顶级模块中的某个位置：

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;

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

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

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

1 个答案: