Javascript 问题 - 未捕获的类型错误：无法读取未定义的属性 'incart'

Question

我正在尝试增加或减少数量，但由于某种原因，增加、减少和删除产品按钮不起作用。每当我单击图标时，我都会看到错误“未捕获的 TypeError：无法读取 console.log 中未定义的属性 'inCart'。我花了很多时间但没有找到错误。 let carts = document.querySelectorAll('.add-cart');

 let products = [

  {

    name:'Natural Straight',
    tag: 'naturalStraight',
    price: 95,
    incart:0
},

{

    name:'Natural Wavy',
    tag: 'naturalWavy',
    price: 200,
    incart:0
},

{

    name:'Clip in Bangs',
    tag: 'Bangs',
    price: 50,
    incart:0
},

{

    name:'Bronde Balayage',
    tag: 'brondeBalayage',
    price: 350,
    incart:0
},

]

for (let i=0; i < carts.length; i++){

carts[i].addEventListener('click',() =>{
    cartNumbers(products[i]);
    totalCost(products[i]);
})

}

 function onLoadCartNumbers()
 {
 let productNumbers = localStorage.getItem('cartNumbers'); 

if(productNumbers){
document.querySelector('.cart span').textContent = productNumbers;

}

}
 function cartNumbers(product)
 {

let productNumbers = localStorage.getItem('cartNumbers'); 
productNumbers = parseInt(productNumbers);

 if(productNumbers) {
localStorage.setItem('cartNumbers', productNumbers + 1); 
 document.querySelector('.cart,span').textContent=productNumbers + 1;    
 }else {

    localStorage.setItem('cartNumbers',1);  
    document.querySelector('.cart,span').textContent =1;  
 }

 setIteams(product);
}

function setIteams(product){

     let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);


    if(cartItems != null){

        if(cartItems[product.tag] == undefined){

            cartItems ={

                ...cartItems,
                [product.tag]: product
            }
        }
        cartItems[product.tag].incart += 1;
        }else {
        product.incart =1;      
     cartItems = {          
        [product.tag]: product          
    }

    } 


    localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}



  function totalCost(product){

//  console.log("te product price is", product.price);

let cartCost = localStorage.getItem('totalCost'); 
console.log("My cartCost is", cartCost);
console.log(typeof cartCost);

if(cartCost !=null){
    cartCost = parseInt(cartCost);
    localStorage.setItem("totalCost", cartCost + product.price);

}else{

localStorage.setItem("totalCost", product.price);   
}

}
 function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);

let productContainer = document.querySelector(".products");
let cartCost = localStorage.getItem('totalCost'); 

if(cartItems && productContainer) { 
    productContainer.innerHTML ='';
    Object.values(cartItems).map(item => {
    productContainer.innerHTML +=   
        ` <div class="product">
         <ion-icon name="close-circle-outline"></ion-icon> 
         <img src="./images/${item.tag}.jpg">
          <span>${item.name}</span> 
    <div class="price">$${item.price},00</div>
    <div class="quantity">
    <ion-icon class="decrease" name="caret-back-circle-outline"></ion- 
  icon>
        <span>${item.incart}</span> 
<ion-icon class="increase" name="caret-forward-circle-outline"></ion-icon>
    </div>
    <div class="total">$${item.incart * item.price},00 </div>
     </div> 
        `;
    });      

}  
    manageQuantity();
   }

 function manageQuantity() {

    let decreaseButton = document.querySelectorAll('.decrease');
    let increaseButton = document.querySelectorAll('.increase'); 

    let cartItems = localStorage.getItem('productsInCart') //Grab all the 
     cartItems from localstorage
    let currentQuantity = 0;  
                               is 0 when we get started
    let currentProduct = " ";
    cartItems = JSON.parse(cartItems); 
    console.log(cartItems);


   // whenever we click on them the addEventListner does some action
   for (let i=0; i < decreaseButton.length; i++) {
      decreaseButton[i].addEventListener('click', () => {

      // whenever I click on decrease button I want to know the current 
        quantity 
        currentQuantity = 
        decreaseButton[i].parentElement.querySelector('span').textContent; 
        console.log(currentQuantity);

        //replace(//g,'') -to remove place between words,g is for globally 
        everywhere on textcontent.
        currentProduct = 
        decreaseButton[i].parentElement.previousElementSibling

       .previousElementSibling.textContent.toLowerCase().replace(/ /g, 
       ''); 
        console.log(currentProduct);


        //checking cartItems and selecting the one with name and accessing  
        incart from cartItems.
   cartItems[currentProduct].incart = cartItems[currentProduct].incart -1; 
    });  
    }

 }

Answer 1

该错误表示您正试图从未定义的 Object 访问属性的值。

在您的情况下，cartItems[currentProduct] 对象未定义，这就是您收到错误的原因。

这可能是由于以下原因：

• cartItems 不包含 currenProduct
• currentProduct 是 undefined
• cartItems 本身是未定义的。

但是从您的代码中可以清楚地看出您已经为cartItems 分配了一个值。 所以问题很可能是cartItems不包含currentProduct或者currentProduct是undefined。

检查这些，您的代码应该可以正常工作。