如果存在增加计数，否则将新产品添加到购物车

Question

我创建了一个购物车，我可以向其中添加产品并且工作正常，但是我现在正在尝试对其进行调整，因此如果您尝试添加购物车中已存在的产品（它会检查是否有匹配的产品） ID存在于

useState

数组中）它不会再次将产品添加到购物车，而是增加数量值。

虽然我已经完成了大部分工作，并且我的下面的代码实际上增加了产品数量（如果存在），但它也向购物车数组添加了一个空白项目，我有点绞尽脑汁试图阻止它但没有成功。

这是我最新的代码以及将同一产品多次添加到购物车时视觉上发生的情况：

const addToCart = (productID, productBrand, productTitle, productPrice, productQuantity, productThumbnail) => {
  const checkProdtExists = props.cartProducts.find(product => product.productID == productID);
  if (checkProdtExists) {
    props.setCartProducts(prevProduct => [...prevProduct, checkProdtExists.productQuantity++]);
  } else {
    props.setCartProducts(prevProduct => [
      ...prevProduct,
      {
        productID: productID,
        productBrand: productBrand,
        productTitle: productTitle,
        productPrice: productPrice,
        productQuantity: productQuantity,
        productThumbnail: productThumbnail
      }
    ])
  }
}

添加产品一次：

第二次添加相同的产品：

对于问题和解决方案有什么帮助吗？将不胜感激，谢谢

Answer 1

问题就出在这里

props.setCartProducts(prevProduct 
=> [...prevProduct, checkProdtExists.productQuantity++]);

//上面添加了productQuantity的增量值作为新项目，因为它在添加之前返回了新值。

//findProductByIndex -method checks if a product with the specified productID exists in the cart.
const checkProdExistsByIndex = 
  props.cartProducts.findIndex(product => product.productID == productID);

  if (checkProdExistsByIndex != -1) {
   props.setCartProducts(prevProducts => {
     const productsNeedsToBeUpdated = [...prevProduct] // get the product need to be updated 
    productsNeedsToBeUpdated[checkProdExistsByIndex].productQuantity += productQuantity
    // get the product quantity of the product and update it
     return productsNeedsToBeUpdated
   });
  } else {
    // If the product does not exist, add a new one to the cart
    props.setCartProducts(prevProduct => [
      ...prevProduct,
      {
        productID: productID,
        productBrand: productBrand,
        productTitle: productTitle,
        productPrice: productPrice,
        productQuantity: productQuantity,
        productThumbnail: productThumbnail
      }
    ])
  }
}

希望这有帮助！..