React中reduce方法仅计算前两值返回NaN问题排查

算力阿峰

2026-8-11

问题分析与修复

核心错误1：`reduce`用法完全错误

你在reduce回调里直接返回<Text>组件，这会导致：

第一次迭代时，previousValue是数组第一个元素的计算值，和currentValue相加后返回<Text>组件
第二次迭代时，previousValue变成了<Text>对象，用Number()转换会得到NaN，后续所有计算都会变成NaN

核心错误2：可能存在索引越界

map的索引j基于data[zone][product]的长度，但你用它取dt.order_list[0].order_list_products[j]，如果order_list_products的长度比data[zone][product]短，就会取到undefined，mix_percentage为undefined时计算结果就是NaN，直接污染整个累加过程。

修复后的代码

{(() => {
  // 先完成数值累加，再渲染组件
  const total = data[zone][product]
    .map((dt, j) => {
      // 先判断是否存在对应的order_list_products项，避免取undefined
      const productItem = dt.order_list[0]?.order_list_products[j];
      if (!productItem || isNaN(productItem.mix_percentage) || isNaN(dt.tons_ordered)) {
        return 0; // 无效值直接返回0，不影响求和
      }
      return (productItem.mix_percentage / 100) * dt.tons_ordered;
    })
    .reduce((prev, curr) => prev + curr, 0); // reduce只做数值累加，初始值设为0

  return <Text style={styles.tr}>{total}</Text>;
})()}