Question

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

Answer 1

您需要为每个产品设置一个柜台。现在，您只需将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数组有关，因此可以将其删除。

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

1 个答案: