ReactJS中如何获取数组内quantity值计算订单总金额？

一、quantity字段取值失败的排查&修复 #

拿不到数组内quantity字段90%以上是访问逻辑错误，按以下步骤逐一核对即可：

• 第一步先把完整的订单数据打印到控制台，确认quantity的实际挂载层级：大部分场景下quantity不会直接挂在订单数组的第一层，通常嵌套在goods_list、sku_info、items这类商品子数组的项里，同时注意核对字段拼写、大小写（比如是quantity还是Quantity、buy_count，不要靠记忆写字段名）
• 数组类型的数据必须遍历到具体项才能取属性，不要直接在数组对象上点属性取值，标准实现代码参考：

// orderList 为接口返回/本地存储的订单数组
orderList.forEach(singleOrder => {
  let totalAmount = 0
  // 替换成你控制台看到的实际商品数组字段名
  const goodsList = singleOrder.goods_list || []
  goodsList.forEach(goods => {
    // 取值后统一转数字，加默认值避免NaN
    const buyNum = Number(goods.quantity) || 0
    const unitPrice = Number(goods.price) || 0
    totalAmount += buyNum * unitPrice
  })
  // totalAmount就是当前订单的商品总金额，如果有优惠/运费再额外加减即可
  console.log('单订单总金额：', totalAmount)
})

• 如果你是通过接口异步获取的订单数据，必须等接口响应完成、本地变量完成赋值后再执行计算逻辑，不要在请求发送后立刻取值，此时数据还未返回，数组为空自然拿不到字段
• 如果打印出来商品项是JSON字符串格式而非对象，先执行JSON.parse(goodsItem)转成对象后再取quantity字段

二、其他计算订单总金额的可选方案 #

如果前端遍历计算的方式维护成本高，可以选择更稳妥的实现方式：

• 协调后端在订单列表接口直接返回计算完成的total_amount字段，前端直接展示即可。这种方式可以避免前后端计算规则不一致的问题（比如满减、折扣、优惠券、运费的计算逻辑如果只维护在后端，前端自己算很容易出现金额偏差）
• 如果订单数据存在本地，在订单创建/更新时就提前算好总金额和订单数据一起存储，后续读取时直接拿预存的总金额字段，不需要每次遍历商品重复计算
• 临时兜底场景：如果字段名动态变化无法固定，可以遍历商品项的所有属性，匹配字段名包含quantity、count、num的数值类型字段作为购买数量，该方案兼容性差，仅适合临时调试使用

金额计算注意事项：所有参与计算的字段必须先转为数字类型，不要直接用字符串做乘法，同时给每个字段加0作为默认值，避免空值、非数字值导致计算结果为NaN

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