React.js中如何使用reduce计算购物车嵌套数组的累计价格

报错原因说明 #

你遇到的undefined错误大概率是没有对嵌套的数组做空值兼容：接口返回的ShopCartList、productCartList可能出现undefined/null的情况，直接遍历访问子属性就会抛出异常。

实现代码（JavaScript） #

function calculateCartAmount(cartData) {
    // 初始化结果变量
    let totalAmount = 0;
    const shopAmountMap = {};

    // 兼容空数据，避免遍历报错
    const shopList = cartData?.ShopCartList ?? [];

    shopList.forEach(shopItem => {
        const shopId = shopItem.ShopID;
        // 初始化当前店铺金额
        shopAmountMap[shopId] = shopAmountMap[shopId] ?? 0;
        
        const productList = shopItem?.productCartList ?? [];
        productList.forEach(product => {
            // 单商品小计 = 单价 * 购买数量
            const itemTotal = product.Price * product.Count;
            // 累加店铺金额
            shopAmountMap[shopId] += itemTotal;
            // 累加全购物车总金额
            totalAmount += itemTotal;
        });
        // 可选：保留两位小数处理精度问题
        shopAmountMap[shopId] = Number(shopAmountMap[shopId].toFixed(2));
    });

    totalAmount = Number(totalAmount.toFixed(2));
    return {
        // 全购物车总价格
        totalAmount,
        // 分店铺总价格，键为ShopID，值为对应店铺总金额
        shopAmountMap
    };
}

使用示例 #

// 传入你的接口返回数据
const cartData = {
  "CartID": "610a20c7d51ba524b7f949cd",
  "ShopCartList": [
    {
      "ShopID": "610a29e1d51ba524b7f949d0",
      "productCartList": [
        {
          "ProductID": "610a33f7d51ba524b7f949df",
          "VariationSKU": "062101403N",
          "Price": 2385.96,
          "Count": 1,
          "Attribute": {
            "Weight": "8.29",
            "Diameter": "5.40"
          },
          "CreatedDate": "2021-11-15T06:43:36.482Z",
          "CreatedBy": "610a20c7d51ba524b7f949cd",
          "LastUpdatedDate": "2021-11-15T06:43:36.482Z",
          "LastUpdatedBy": "610a20c7d51ba524b7f949cd"
        }
      ]
    }
  ]
};

const result = calculateCartAmount(cartData);
console.log(result.totalAmount); // 输出 2385.96
console.log(result.shopAmountMap); // 输出 { "610a29e1d51ba524b7f949d0": 2385.96 }

注意事项 #

• 代码中使用?.可选链和??空值合并运算符做兜底，即便接口返回空数组、字段缺失也不会抛出undefined错误
• 金额计算使用toFixed(2)处理小数精度问题，可根据业务需求调整保留位数
• 如果需要返回店铺名称等额外信息，可以在遍历ShopCartList时额外存储对应字段到shopAmountMap中

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