React中使用for循环对数组对象字段求和结果异常该如何解决

问题原因 #

• 核心逻辑错误出在for循环内部的map调用：Array.map()方法返回的是包含所有遍历结果的新数组，你直接将数值类型的quantity和数组相加时，会触发JS隐式类型转换，数组会被转为逗号拼接的字符串，最终得到的是拼接后的字符串而非求和数值。
• 逻辑冗余：你已经通过for循环遍历wasteItem的索引，完全不需要嵌套map再次遍历整个数组，按你当前的写法循环2次时，相当于连续两次把[20,20]转为字符串和初始值0拼接，最终结果会是020,2020,20这类不符合预期的字符串。

解决方法 #

你可以选择任意一种修正方案：

方案1：修正for循环写法 #

直接通过索引取当前遍历项的quantity值累加即可，不需要嵌套map：

let quantity = 0;
for (let i = 0; i < wasteItemLength; i++) {
  quantity += wasteItem[i].quantity;
}

方案2：使用Array.reduce()实现求和（更推荐） #

不需要手动写for循环，直接用数组原生的reduce方法完成累加，代码更简洁：

const quantity = wasteItem.reduce((sum, currentItem) => sum + currentItem.quantity, 0);

补充说明 #

你当前把求和逻辑写在组件顶层是可行的，由于初始状态下offers是空数组，接口请求完成前求和结果会是0，等接口返回数据更新offers状态后，组件重渲染就会计算出正确的40的结果。

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