Javascript 根据“生成购物车数组”；“添加到购物车”；点击产品

我正在构建这个小型购物车项目，但是，当我将产品传递给购物车类时，发生了一些奇怪的事情

当我在cart类中创建console.log（）产品列表时，我会为每个产品获得单独的数组。例如，如果我从一个产品中添加3个产品，它们将存储在一个单独的阵列中，请参见下面的屏幕截图：

注意：请注意，我每次点击一个，我只希望我添加到购物车的所有产品都有一个数组。

请参阅下面的代码，包括此代码中涉及的所有类

如控制台所示：

(3) [{…}, {…}, {…}]
0: {id: 1, productName: "Strawberry Basil", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Pop_Still_4K_Front-CherryPop.png?v=1588713373", type: Array(3), price: 7}
1: {id: 1, productName: "Strawberry Basil", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Pop_Still_4K_Front-CherryPop.png?v=1588713373", type: Array(3), price: 7}
2: {id: 1, productName: "Strawberry Basil", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Pop_Still_4K_Front-CherryPop.png?v=1588713373", type: Array(3), price: 7}
length: 3
__proto__: Array(0)
app.js:151 

(3) [{…}, {…}, {…}]
0: {id: 2, productName: "Sour Blueberry", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Still_4K_Front-SourBlueberry.png?v=1588713584", type: Array(2), price: 7}
1: {id: 2, productName: "Sour Blueberry", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Still_4K_Front-SourBlueberry.png?v=1588713584", type: Array(2), price: 7}
2: {id: 2, productName: "Sour Blueberry", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Still_4K_Front-SourBlueberry.png?v=1588713584", type: Array(2), price: 7}
length: 3
__proto__: Array(0)

//用于开发的本地项目列表
常数乘积=[{
id:1，
产品名称：“草莓罗勒”，
productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373',
类型：['berry'、'citrusy'、'fancy']，
价格：7，
},
{
id:2，
产品名称：“酸蓝莓”，
productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584',
类型：[“酸”、“浆果”]，
价格：7，
},
{
id:3，
产品名称：“黑莓果酱”，
productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965',
类型：[“浆果”]，
价格：7，
}
];
类侧提手{
cartProducts=[]；
addToCart（产品）{
这个。cartProducts。push（产品）；
console.log（this.cartProducts）；
const productEl=document.createElement（'div'）；
productEl.textContent='product1'；
}
renderCart（）{
让cartEl=document.createElement（'h2'）；
cartEl.id='购物车列表为空'；
cartEl.textContent='购物车为空'；
返回卡特尔；
}
}
//单产品渲染
类SingleProductRendering扩展了SideCartDrawer{
建造商（产品详情）{
超级（）；
this.product=productDetails；
this.productElementTemplate=document.getElementById（'item-main-template'）；
}
addProductToCart=（）=>{
this.addToCart（本产品）；
};
render（）{
const productTemplateEl=document.importNode(
this.productElementTemplate.content，
真的
);
const productEl=productTemplatel.querySelector（'.single product'）；
productEl.id=this.product.id；
productEl.querySelector（'img'）.src=this.product.productImgURL；
productEl.querySelector（'h2'）.textContent=this.product.productName；
const btn=productEl.querySelector（'button'）；
btn.addEventListener（'单击'，（）=>{
这个.addProductToCart（）；
});
退货产品；
}
}
//产品列表呈现
类产品列表{
构造函数（）{
这是fetchProducts（）；
}
获取产品（）{
这一点。产品=产品；
}
render（）{
const productListEl=document.createElement（'section'）；
productListEl.className='产品持有者'；
productListEl.id='产品持有者'；
对于（让本产品的产品）{
const productEl=新的SingleProductRendering（产品）；
const productElRendered=productEl.render（）；
productListEl.append（productElRendered）；
}
返回产品列表；
}
}
//车间API-组装
班级商店{
render（）{
const renderHookProductList=document.getElementById（'app'）；
const cartHook=document.getElementById（'cart-items-list'）；
const productList=新产品列表（）；
const productListRendered=productList.render（）；
append（productListRendered）；
const cartItemDrawer=新的SideCartDrawer（）；
const cartDrawer=cartItemDrawer.renderCart（）；
cartHook.append（cartDrawer）；
}
}
施工车间=新车间（）；
shop.render（）







运货马车
全部的
0
结账
您需要查看购物车是否已经有了产品

addToCart(product) {
  const cartProduct = this.cartProducts.find(item => item.id === product.id);
  if (cartProduct) {
    cartProduct.qty++
    }  
  else {
    product.qty = 1;
    this.cartProducts.push(product);
  }  
  console.log(this.cartProducts)
  const productEl = document.createElement('div');
  productEl.textContent = 'product 1';
}


//用于开发的本地项目列表
常数乘积=[{
id:1，
产品名称：“草莓罗勒”，
productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373',
类型：['berry'、'citrusy'、'fancy']，
价格：7，
},
{
id:2，
产品名称：“酸蓝莓”，
productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584',
类型：[“酸”、“浆果”]，
价格：7，
},
{
id:3，
产品名称：“黑莓果酱”，
productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965',
类型：[“浆果”]，
价格：7，
}
];
类侧提手{
cartProducts=[]；
addToCart（产品）{
const cartProduct=this.cartProducts.find（item=>item.id==product.id）；
if（产品）{
产品数量++
}  
否则{
产品数量=1；
这个。cartProducts。push（产品）；
}  
console.log（this.cartProducts）
const productEl=document.createElement（'div'）；
productEl.textContent='product1'；
}
renderCart（）{
让cartEl=document.createElement（'h2'）；
cartEl.id='购物车列表为空'；
cartEl.textContent='购物车为空'；
返回卡特尔；
}
}
//单产品渲染
类SingleProductRendering扩展了SideCartDrawer{
建造商（产品详情）{
超级（）；
this.product=productDetails；
this.productElementTemplate=document.getElementById（'item-main-template'）；
}
addProductToCart=（）=>{
this.addToCart（本产品）；
};
render（）{
const productTemplateEl=document.importNode(
this.productElementTemplate.content，
真的