Next.js/React中如何对map遍历的数组指定字段（如fees）求和？

核心逻辑落地位置 #

求和代码必须写在组件作用域内、JSX return 语句之前，不要嵌入到map遍历的回调逻辑中，否则会在每次单条列表渲染时重复计算总和，造成不必要的性能浪费。

具体实现语法 #

针对需要累加的fees字段，用Array.reduce()实现累加时一定要做边界值兜底，避免出现NaN导致的显示异常，标准写法如下：

// 组件函数体内、return 语句前的代码段
const totalFees = positions.reduce((accumulator, current) => {
  // 对当前条目的费用字段做类型转换，空值/无效值按0计算
  const currentFee = Number(current.fees) || 0
  return accumulator + currentFee
}, 0) // *初始累加值必须设为0*：空数组场景下会直接返回0，不会触发语法错误

完整JSX整合示例 #

计算完成的总费用值可以直接渲染在列表遍历逻辑的上方，原有渲染List组件的map逻辑完全不需要修改，整合后的代码结构：

return (
  <div className="positions-container">
    {/* 列表上方展示总费用 */}
    <div className="total-summary">
      持仓总费用：{totalFees.toFixed(2)}
    </div>
    {/* 原有map渲染List的逻辑保持不变 */}
    {positions.map(position => {
      return (
        <List
          title={position.title}
          slug={position.slug}
          quantity={position.quantity}
          position={position.position}
          price={position.transactionPrice}
          fees={position.fees}
          code={position.assetType.code}
          assetName={position.assetType.name}
          assetType={position.assetType.__typename}
        />
      );
    })}
  </div>
)

常见避坑提示 #

• 不要省略reduce的初始累加值：如果漏写0，空数组场景下reduce会直接抛出运行时错误，且首次累加会错误把数组第一个元素作为累加起点，导致计算偏差。
• 必须对单条字段值做空值处理：GraphQL接口返回的数值字段可能因数据缺失返回null、undefined，直接累加会最终得到NaN的展示结果。
• 多字段求和优化：如果后续需要同时统计总持仓数、总持仓成本等多个指标，不需要写多个reduce循环，可以在同一次数组遍历中同步完成多个字段的累加，降低数组遍历的性能开销。

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