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保留更新的购物车，您可以做任何您想做的事情。通常，这种类型的操作必须在购物车减速器中，但是您没有发布减速器代码。

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

对于购物卡，我们需要在状态中将cartItems属性作为数组，并且每次单击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按钮的组件中的reducer。这是小车减速器，大小写为CartActionTypes.ADD_ITEM。

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

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

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

购物车/将多个商品添加到购物车

3 个答案: