单击多次时，购物产品的数量不会刷新

Question

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

我尝试过，但找不到错误。我认为错误是在“ if（存在）{...}”中，但不知道在哪里。

我对其进行了编辑以添加更多代码

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);
}