React应用中如何对对象属性值进行聚合汇总？

你现有代码的问题是遍历数组时仅对单个对象的coinValue属性重复相加，且每遍历一个元素就生成一行总计，不符合全局累加的需求。你可以使用数组的reduce方法完成所有对象的属性值累加，修改后的代码如下：

// 先在return外部计算所有coinValue的总和
const totalCoinValue = coinInfo.reduce((acc, curr) => acc + curr.coinValue, 0)

return (
  <table>
    {/* 此处保留你原有thead、tbody的业务代码 */}
    <tfoot>
      <tr>
        <th>Total: {numberFormatter.format(totalCoinValue)}</th>
      </tr>
    </tfoot>
  </table>
);
};

export default CoinList;

补充说明 #

• reduce方法第一个参数是累加器函数，acc存储累计的总和，curr是当前遍历到的数组元素
• 第二个参数0是累加初始值，避免coinInfo为空数组时出现报错
• 如果你的coinValue是字符串类型的数字，需要转成数值再累加，把累加逻辑改成acc + Number(curr.coinValue)即可

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