JavaScript对象数组价格重复相乘问题求助（单价×数量计算异常）

问题核心：你每次更新购物车商品价格时，误用了已经计算过总价的item.price去乘以count，导致每次操作都在之前的总价基础上重复相乘，自然会出现价格异常增长的情况。

解决关键：必须保留商品的原始单价，每次计算总价都基于「原始单价 × 当前数量」，而非已计算的总价。

具体修改步骤 #

1. 调整类型定义，新增原始单价字段 #

首先在ProductType中添加originalPrice字段，专门存储商品的原始单价：

type ProductType = {
  picture: string;
  title: string;
  price: number; // 存储总价：originalPrice × quantity
  originalPrice: number; // 新增：存储商品的原始单价
  productRef: string;
  quantity: number;
};

2. 修改商品创建逻辑，保留原始单价 #

在handleCart中创建newProduct时，同时保存原始单价和基于它计算的总价：

function handleCart() {
  const newProduct: ProductType = {
    picture: imageSrc,
    title,
    originalPrice: price, // 存入原始单价
    price: price * count, // 总价基于原始单价计算
    productRef,
    quantity: count
  };  
  setCart(prev => handeleCartControl({
    array: prev,
    newProduct,
    statement1: prev.some(item => item.productRef === productRef) && count !== 0,
    statement2: count > 0
  }));
}

3. 修正价格更新逻辑，基于原始单价计算 #

在handeleCartControl的更新分支中，只针对目标商品，用其原始单价乘以新数量得到正确总价：

function handeleCartControl({
  array,
  newProduct,
  statement1,
  statement2
}: {
  array: ProductType[],
  newProduct: ProductType,
  statement1: boolean,
  statement2: boolean,
}) {
  if (statement1) {
    return array.map(item => {
      // 仅更新匹配到的目标商品
      if (item.productRef === newProduct.productRef) {
        return {
          ...item,
          quantity: newProduct.quantity,
          price: item.originalPrice * newProduct.quantity
        };
      }
      return item;
    });
  } else if (statement2) {
    return [...array, newProduct];
  } else return array.filter(item => item.productRef !== newProduct.productRef);
}

内容的提问来源于stack exchange，提问作者Diego Braga