时间戳

首页 > 解决方案 > 如何将相同的商品添加到购物车但只增加数量

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

问题描述

我正在尝试将相同的商品添加到购物车中并试图使其仅增加数量，但是每当我将商品添加到购物车时，它都会显示 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

标签： reactjsreduxreact-redux

解决方案

您需要持有每个产品的柜台。现在您只需将push产品放入数组中。

代替

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数组有关，因此可以将它们删除。

推荐阅读