エラーが発生しにくい "Uncaught TypeError：未定義の 'name'プロパティを読み取れません。

Question

私はピザのチェックアウトカートを作成するためにJavaScriptコードを作成していますが、showCart関数に問題があります。

let pizzas=[ 
{ name:"Pepperoni", img:"pizza.png", price:8.99}, 
{ name:"Alfredo", img:"pizza.png", price:9.99}, 
{ name:"Cheese", img:"cheese.png", price:7.99} 
]; 

function registerButtonEvents() 
{ 
    let buttons=document.getElementsByTagName("button"); 
    for(let i = 0; i < buttons.length-1; i++) 
    { 
     buttons[i].addEventListener("click", function() { 
      addToCart(i); 
     }); 
    } 
    let number = localStorage.getItem("number"); 
    if(number == null) 
     number = 0; 
    document.getElementById("num").innerHTML = number; 
} 

function addToCart(pId) 
{ 
    let cartJ = localStorage.getItem("cart"); 
    let cart; 

    if(cartJ===null) //Cart is empty 
    { 
     cart=[]; 
    } 
    else 
    { 
     cart=cartJ.split(","); 
    } 

    cart.push(pId); 
    let number= localStorage.getItem("number"); 

    if(number===null) 
     number = 0; 

    document.getElementById("num").innerHTML = `${++number}`; 
    localStorage.setItem("cart", cart.toString()); 
    localStorage.setItem("number", number); 
} 

function clearCart() 
{ 
    localStorage.removeItem("cart"); 
    localStorage.removeItem("num"); 
} 

function showCart() 
{ 
    let cartJ = localStorage.getItem("cart"); 
    let cart = []; 
    let info = ""; 
    if(cartJ === null) 
    { 
     document.getElementById("myCart").innerHTML=`<h2>No items in cart!</h2>`; 
    } 
    else 
    { 
     cart = cartJ.split(","); 
     for (let i in cart) 
     { 
      let item = pizzas[cart[i]]; 
      info+= 
       `<div class="row"> 
        <div class="col-md-2 text-center"> 
         <h3>${item.name}</h3> 
        </div> 
        <div class="col-md-2 text-center"> 
         <img class="pizza" src="./images/${item.img}" alt="pepperoni"> 
        </div> 
        <div class="col-md-2 text-center"> 
         <h3>${item.price}</h3> 
        </div> 
        <div class="col-md-2 text-center"> 
         <button type="button" class="btn btn-primary" onclick="removePizza(${i})">Remove</button> 
        </div> 
       </div> 
       `; 
     } 
     document.getElementById("myCart").innerHTML=info; 
    } 
} 


function removePizza(piz) 
{ 
    var cart = localStorage.getItem("cart"); 
    cart = cart.split(","); 
    cart.splice(piz, 1); 
    if (cart.length == 0) 
     clearCart(); 
    else 
    { 
     localStorage.setItem("cart", cart); 
     localStorage.setItem("number",cart.length); 
    } 
    showCart(); 
} 

開発ツールは、エラーがでラインであることを教えてください：

let item = pizzas[cart[i]]; 

が、私は必ずしも理由を理解していません。誰かが何らかのフィードバックを送ることができれば、それは非常に高く評価されます。

Answer 1

<h3>${item.name}</h3>にアクセスすると問題が発生します。あなたのカート（cart = cartJ.split(",");）は "Pepperoni"（カンマを使って分割したもの）のような文字列を格納している可能性があり、その後インデックスの代わりにそれらの文字列の1つを使用してピザ配列にアクセスしたいので、この状況で