我在使用反应从 redux 调用 state 时遇到了一些麻烦

Question

嗨，我是新手，我正在使用 redux 制作简单的购物车应用程序并为练习做出反应。 我调用产品 api 数据并将其保存在称为产品的商店中，当用户单击按钮时，它应保存在称为“购物车”的 state 中。 当我 console.log(props.state.cart) 向我显示用户单击的数据但如果我尝试调用数据时，它向我显示 map 不是 ZC1C425268E68385D1AB507ZF4A9414A 的错误

产品列表.js

import React, { useEffect } from "react";
import { getAllProducts, getCartList } from "../../../actions/postActions";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { AddToCartButton } from "./AddToCartButton";
// import ShoppingCart from "../shoppingCart.js/ShoppingCart";

const ProductList = (props) => {
  useEffect(() => {
    props.getAllProducts();
  }, []);

  // when I console.log it shows the data which user clicked.
  console.log(props.cartList);
  const addToCart = async (item) => {
    props.getCartList(item);
  };

  return (
    <div>
      {props.products.map((x) => (
        <div key={x.id}>
          <img className="productImg" src={x.image} alt={x.title} />
          <h4>{x.title}</h4>
          <p>{x.price}€</p>
          <button onClick={() => addToCart(x)}>test cart</button>
          <AddToCartButton />
        </div>
      ))}

      <div>
        {props.cartList &&
          props.cartList.map((x) => <li key={x.id}>{x.title}</li>)}
      </div>
    </div>
  );
};

ProductList.propTypes = {
  getAllProducts: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
  getCartList: PropTypes.func.isRequired,
  cartList: PropTypes.array.isRequired,
};
const mapStateToProps = (state) => ({
  products: state.items.allItems,
  cartList: state.items.cart,
});

export default connect(mapStateToProps, { getAllProducts, getCartList })(
  ProductList
);

postReducer.js

import { FETCH_PRODUCTS, SHOPPING_CART, AMOUNT, USERS } from "../actions/types";

const initialState = {
  allItems: [],
  cart: [],
  amount: 3,
 
};

export default function (state = initialState, action) {
  console.log(action.payload);
 //output: list of allItems and object of cart item which user clicked
  switch (action.type) {
    case FETCH_PRODUCTS:
      return {
        ...state,
        allItems: action.payload,
      };

    case SHOPPING_CART: {
      return {
        ...state,
        cart: action.payload,
      };
    }
    case AMOUNT: {
      return {
        ...state,
        amount: state.amount,
      };
    }
  

    default:
      return state;
  }
}

Answer 1

在减速器中试试这个：

case SHOPPING_CART: {
  return {
    ...state,
    cart: [action.payload,...state.cart],
  };
}