购物车/将多个项目添加到购物车

Question

我正在尝试使用 React js 和 Redux 创建一个购物车，但我遇到了一个问题。

尝试了很多方法，但是当我将多个项目（食物/饮料）添加到列表中时，我总是失败，然后一切似乎都在工作，但是当我想例如向现有选择添加额外的饮料时，我的列表会被覆盖。 这是我现在拥有的代码：

const addItemToCart = item => {
   if (cartItems.length) {
     cartItems.forEach(itemToCheck => {
       if (item.name === itemToCheck.name) {
         addCountToItem({ ...itemToCheck, count: itemToCheck.count + 1 });
       } else if (item.name !== itemToCheck.name) {
         addToCart({ ...item, count: 1 });
       }
     });
   } else if (cartItems.length === 0) {
     addToCart({ ...item, count: 1 });
   }
 };

想法是我可以在列表中有多个项目，并且列表中可以有无限数量的相同项目。 所以基本上，我应该能够有 5 个相同类型的比萨饼，3 个不同类型的啤酒等。

我想像任何其他购物车一样。 提前致谢。

更新：

这里是 addCountToItem 的代码。 我删除了它，但它正朝着这个方向发展

state.cartItems[findIndex(...)] = data.cartItem

Answer 1

解决您的问题的基本方法是

`let index=cartItem.findIndex(temp=>temp.name===item.name);
 if(index>-1){
     cartItem[index].count++;
 }
 else{
     cartItem.append({...item, count: 1 })
 }`

尽量不要改变cartItem对象

Answer 2

我们还需要查看所有相关代码才能成功回答。

这里我给出示例示例，updatedCartItems 保留更新后的购物车，您可以为所欲为。 一般来说，这种类型的操作必须在cart reducer 中，但您没有发布reducer 代码。

const addItemToCart = item => {
  let updatedCartItems = [...cartItems];

  updatedItemIndex = updatedCartItems.findIndex(
    item => item.name === itemToCheck.name   // better to check with some kind of id if exists
  );

  if (updatedItemIndex < 0) {
    updatedCartItems.push({ ...item, count: 1 });
  } else {
    const updatedItem = {
      ...updatedCartItems[updatedItemIndex]
    };
    updatedItem.count++;
    updatedCartItems[updatedItemIndex] = updatedItem;
  }

 //updatedCartItems  => the new cart
};

Answer 3

对于购物卡，我们需要在我们的状态中将 carItems 属性作为数组，每次我们点击 addToCart 按钮时，我们都会将该项目推送到该数组，然后我们在 cartDropdown 组件或结帐页面中呈现该数组。

由于您可以将单个项目添加到购物车，这意味着您已正确设置了 redux。 为了多次将相同的项目添加到购物车，我们只需要编写一个简单的实用程序函数。

这是效用函数：

export const addItemToCart = (cartItems, cartItemToAdd) => {
  //find(condition) finds the first item in the array based on the condition.
  const existingCartItem = cartItems.find(item => item.id === cartItemToAdd.id);
  if (existingCartItem) {
    //in order for change detection to trigger we have to rerender
    //otherwise our quantity property will not be updated
    //map will return a new array 
    //we need to return new versions of our state so that our component know to re render
    //here we update the quantity property
    return cartItems.map(item =>
      item.id === cartItemToAdd.id
        ? { ...cartItemToAdd, quantity: item.quantity + 1 }
        : item
    );
  }
  //when you first time add a new item, sine exixtingCartItem will be falsy, it will pass the first if block and will come here
  //quantity property gets attached the first time around since this if block wont run when it is a new item.
 //in the beginning cartItems array is empty. every time you add a new item to this array, it will add "quantity:1" to this item object.  
  return [...cartItems, { ...cartItemToAdd, quantity: 1 }];
};

这是将商品添加到购物车的操作

export const CartActionTypes = {
  ADD_ITEM: "ADD_ITEM",
};

export const addItem = item => ({
  type: CartActionTypes.ADD_ITEM,
  payload: item
});

由于您可以将单个项目添加到购物车，这意味着您已正确设置了 redux。 您需要将其分派给呈现 addToCart 按钮的组件中的减速器。 这是购物车减速器，案例是 CartActionTypes.ADD_ITEM。

import { addItemToCart } from "./cart.utils";

case CartActionTypes.ADD_ITEM:
      return {
        ...state,

        cartItems: addItemToCart(state.cartItems, action.payload)
      };