多次点击购物车产品数量不刷新

Question

当我点击一个产品时，我希望数量增加1，该功能正在工作，但不显示在购物车中，除非我添加另一个不存在于购物车中的产品。任何帮助吗?

我试了，但找不到错误。我认为错误是在"if(exist){…}"&;但不知道在哪里。

我编辑它来添加更多的代码

const addToCart = document.querySelectorAll('.addToCart');
let carritoEl = document.querySelector('.ul');
let carrito = [];

addToCart.forEach(btn => {
btn.addEventListener('click', addToCarritoItem);});
function addToCarritoItem(e){
e.preventDefault();

const boton = e.target;
const item = boton.closest('.box'); 
const itemTitle = item.querySelector('.producto-titulo').textContent;
const itemPrice = item.querySelector('.precio').textContent;
const itemImg = item.querySelector('.imgCart').src;
const itemId = item.querySelector('.addToCart').getAttribute('data-id');

const nuevoProducto = {
title: itemTitle,
price: itemPrice,
image: itemImg,
id: itemId,
cantidad: 1
};

const existe = carrito.some(item => item.id === nuevoProducto.id); 
console.log(existe);

if(existe){
const producto = carrito.map( item =>{
if (item.id === nuevoProducto.id){
item.cantidad++;
return item;
}else{
return item;
}
});
}else{
addItemCarrito(nuevoProducto);
}
}
function addItemCarrito(nuevoProducto){

carritoSumaTotal();
carrito.push(nuevoProducto);
renderCarrito(); // 
}
function renderCarrito(){
// carritoEl.innerHTML = ""; //
while(carritoEl.firstChild){
carritoEl.removeChild(carritoEl.firstChild)
};
carrito.forEach((item) =>{
carritoEl.innerHTML += `
<li class="buyItem">
<img src=${item.image}>
<div class="productCartInfo">
<h5 class="prdTitle">${item.title}</h5>
<h6>${item.price}</h6>
<div class="qnty">
<div>
<button class="mbtn">-</button>
<span class="countOfProduct">${item.cantidad}</span>
<button class="pbtn">+</button>
</div>
<div><i class="fas fa-times-circle dltProduct" data-id="${item.id}"></i></div>
</div>
</div>
</li>
`
})

carritoSumaTotal(); 

}

Answer 1

没有错误日志或任何演示，这是我的想法:这是因为您在增加数量后没有调用renderCarrito函数:

// Your Code
if(existe){
const producto = carrito.map( item =>{
if (item.id === nuevoProducto.id){
item.cantidad++;
return item;  // <--- Here you are just returning
} else {
return item;
}
}); // <--- You should probably call renderCarrito() after the mapping
} else {
addItemCarrito(nuevoProducto);
}

这里是一个片段，以帮助您理解我试图解释的内容:

if (existe) {
// 1. map() would return an array
//    Since you are updating the array contents, I would 
//    suggest you use forEach() instead, like so:
carrito.forEach(item => { 
if (item.id === nuevoProducto.id) {
item.cantidad++;
// 2. No need to return item as this would update the item
//    inside the carrito array directly
}
// 3. No need of 'else' block
//    as you are incrementing only if the ids are same
});

// 4. Once you are done looping through
//    you should probably invoke the renderCarrito() method here
//    unless you want to do anything else
renderCarrito();
} else {
addItemCarrito(nuevoProducto);
}