ReactJS中使用reduce()计算商品总价返回NaN的问题排查

我正在开发ReactJS项目，拥有如下JSON格式的商品数组：

[
  {
    "id": "1",
    "category": "cellphones",
    "name": "Xiaomi Redmi Note 10",
    "stock": "99",
    "price": "100",
    "quantity": "3"
  },
  {
    "id": "2",
    "category": "cellphones",
    "name": "Iphone 11",
    "stock": "3",
    "price": "1000",
    "quantity": "5"
  },
  {
    "id": "3",
    "category": "laptops",
    "name": "MSI GF65 Thin",
    "stock": "40",
    "price": "2000",
    "quantity": "2"
  }
]

我希望通过以下代码计算所有商品的总价：

const getAllTotal = () => {
  const sum = cartItems.reduce(
    (prev, next) => prev.quantity * prev.price + next.quantity * next.price,
    0
  );
  console.log(sum);
  return sum;
};

但每次调用该函数时，控制台都返回NaN。我原本以为是字段类型问题，尝试用parseInt()转换相关字段，但结果仍然是NaN。请问我哪里出错了？

核心错误 #

你的reduce回调逻辑存在两个致命问题：

• 初始值设为0，第一次执行回调时prev是数字0，访问prev.quantity和prev.price会得到undefined，undefined参与运算直接返回NaN，后续所有计算都会继承这个错误结果。
• 就算初始值正确，你的逻辑也不是累加总和，而是错误地将前一项商品总价与当前项商品总价直接相加，而非将当前项总价加到之前的累加总和上。

正确实现代码 #

让prev始终代表累加的总价（数字类型），每次将当前商品的总价（转换为数字后计算）加到总和中：

const getAllTotal = () => {
  const sum = cartItems.reduce(
    (total, item) => total + parseInt(item.quantity) * parseInt(item.price),
    0
  );
  console.log(sum);
  return sum;
};

补充说明 #

• 由于你的quantity和price字段都是字符串类型，必须用parseInt/parseFloat/Number()转换为数字后再运算，否则会触发字符串拼接，得到错误结果。
• 如果商品价格存在小数，建议使用parseFloat代替parseInt以保留精度。

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