如何实现购物车数据动态累加？解决addProduct函数调用时商品数量始终为1的问题

看起来你的代码里有几个关键逻辑错误，导致每次调用addProduct()时数量始终为1，甚至出现NaN。咱们一步步梳理并修复：

核心问题分析 #

1. 购物车数据结构错误：你的productItems应该是一个以商品ID为键的对象（用来区分不同商品），但当前代码每次添加商品时都会直接覆盖整个productItems，而不是针对单个ID存储商品信息。
2. 初始化逻辑错误：totalQty和totalPrice的初始化用了错误的布尔判断，会导致数值异常。
3. 数量与价格累加逻辑错误：totalPrice的计算方式重复累加了总价，而非单次商品的单价；同时storedItem的获取和赋值逻辑完全偏离了“按ID存储”的思路。
4. 购物车持久化错误：用req.body存储购物车是无效的，重定向后req.body的内容会丢失，无法保留之前的购物车状态。

修正后的Cart构造函数代码 #

module.exports = function Cart(oldCart) { 
  // 正确初始化：旧购物车存在则复用，否则初始化为空对象和0值
  this.productItems = oldCart.productItems || {}; 
  this.totalQty = oldCart.totalQty || 0; 
  this.totalPrice = oldCart.totalPrice || 0; 

  this.addProduct = function(item, id) { 
    // 按商品ID获取已存储的商品项，不存在则初始化
    let storedItem = this.productItems[id]; 
    if (!storedItem){ 
      storedItem = this.productItems[id] = {item: item, qty: 0, price: 0}; 
    } 
    // 累加数量和价格
    storedItem.qty++; 
    storedItem.price = storedItem.item.price * storedItem.qty; 
    this.totalQty++; 
    // 这里累加的是当前商品的单价，而非storedItem的总价
    this.totalPrice += storedItem.item.price; 
    console.log("Product items: ", this.productItems); 
  }; 

  this.generateArray = function () { 
    let arr = []; 
    // 遍历每个商品ID，把对应的商品项加入数组
    for (let id in this.productItems) { 
      arr.push(this.productItems[id]); 
    } 
    return arr; 
  };
};

修正后的路由代码（添加session持久化） #

首先确保你已经启用了express-session中间件（需要先安装express-session包）：

const session = require('express-session');
app.use(session({
  secret: 'your-secret-key', // 替换成你的自定义密钥
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false } // 生产环境建议设为true（需搭配HTTPS）
}));

然后修改路由：

app.post('/add-to-cart/:id', async (req, res) => { 
  try { 
    let id = req.params.id; 
    // 从session中获取旧购物车，不存在则初始化为空对象
    let cart = new Cart(req.session.cart ? req.session.cart : {}); 
    const { data } = await axios.get('http://localhost:4200/products'); 
    const singleProduct = data.find((product) => product._id === id); 
    cart.addProduct(singleProduct, singleProduct._id); 
    // 将更新后的购物车存入session，实现跨请求持久化
    req.session.cart = cart; 
    res.redirect('/'); 
    console.log("console log cart", cart); 
    console.log("session cart", req.session.cart); 
  } catch (error){ 
    console.log(error); 
  } 
});

关键修改说明 #

• 数据结构调整：productItems现在以商品ID为键存储每个商品的信息，这样不同商品不会互相覆盖，同一商品的数量可以正确累加。
• 初始化修复：totalQty和totalPrice直接用oldCart.xxx || 0，确保初始值为数字而非布尔值，避免NaN问题。
• 累加逻辑修复：totalPrice改为累加商品单价，避免重复计算总价；storedItem通过ID获取，保证同一商品的数量持续累加。
• 持久化修复：用req.session存储购物车，这样用户的购物车状态会在请求之间保留，重定向后不会丢失。

现在你再测试调用API，商品数量应该就能正常叠加了！

内容的提问来源于stack exchange，提问作者Jan Tuđan