如何将相同的商品添加到购物车但只增加数量答案

【问题标题】：How can I add same item to cart but only increase quantity如何将相同的商品添加到购物车但只增加数量
【发布时间】：2020-08-05 04:18:37
【问题描述】：

我正在尝试将相同的商品添加到购物车并试图使其仅增加数量，但每当我将商品添加到购物车时，它都会显示 2 件相同的商品。

这是我的减速器：

import {
    ADD_PRODUCT_BASKET,
    GET_NUMBERS_BASKET,
    LOADING,
    SUCCESS
} from '../actions/type';

const initialState = {
    products: [],
    loading: false,
    basketNumbers: 0,
    cartCost: 0,
    numbers: 0,
    inCart: false
};

export default (state = initialState, action) => {
    switch (action.type) {
        case LOADING:
            return {
                ...state,
                products: [],
                    loading: true,
                    err: ''
            };

        case SUCCESS:
            return {
                ...state,
                products: action.payload,
                    loading: false,
                    err: ''
            };
        case ADD_PRODUCT_BASKET:
            let numbers = (state.numbers += 1);
            let inCart = (state.inCart = true);
            let product = state.products;
            return {
                ...state,
                basketNumbers: state.basketNumbers + 1,
                    cartCost: state.cartCost + action.payload.price,
                    product: product.push(action.payload),
                    numbers: numbers,
                    inCart: inCart
            };
        case GET_NUMBERS_BASKET:
            return {
                ...state
            };
        default:
            return state;
    }
};

这是我的购物车：

function Cart({ basketProps }) {
  const nf = new Intl.NumberFormat();
  let productsInCart = [];

  if (basketProps.inCart) {
    productsInCart = basketProps.products;
  } else {
    productsInCart = [];
  }

  let productQuantity = 1;

    {productsInCart.map((product, i) => (
      <ProductInfo key={i}>
        <Infor>
          <Image src={product.img_url1} />
        </Infor>
        <Infor>
          <ProductTitle>{product.title}</ProductTitle>
          <ProductPrice>
            <ProductQuantity>{productQuantity} x </ProductQuantity>
            {nf.format(product.price)} vnd
          </ProductPrice>
        </Infor>
      </ProductInfo>
    ))}
}

我怎样才能提高质量，而不是像在购物车中添加新商品一样？

如果你想查看我的代码，这里是我的 github 项目：

https://github.com/nathannewyen/the-beuter

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

您需要为每个产品持有一个柜台。现在您只需将pushing 产品保留在数组中即可。

代替

product: product.push(action.payload),

你应该做某事

let products = [...state.product];
let foundProduct = products.find(prod => prod.title === action.payload.title);

if (foundProduct) {
  foundProduct.quantity++;
} else {
 action.payload.quantity = 1;
 products.push(action.payload);
}

然后

 return {
          ...state,
          basketNumbers: state.basketNumbers + 1,
          cartCost: state.cartCost + action.payload.price,
          product: products,
          numbers: numbers,
          inCart: inCart
         };

我不知道basketNumbers和numbers这些其他属性是什么，但我想它们都与product数组有关，因此可以将它们删除。

【讨论】：