如何在react中显示每列的总和

import React, { Component } from 'react';

class DataTable extends Component {
  state = {
    data: [
      { id: 1, name: 'Item 1', column1: 10, column2: 20 },
      { id: 2, name: 'Item 2', column1: 30, column2: 40 },
      { id: 3, name: 'Item 3', column1: 50, column2: 60 },
    ],
    columnSums: {}, // 存储每列总和的变量
  };

  componentDidMount() {
    this.calculateColumnSums(); // 在组件挂载后计算每列总和
  }

  calculateColumnSums = () => {
    const { data } = this.state;
    const columnSums = {};

    data.forEach(item => {
      // 遍历每一项数据，累加每列的值
      Object.keys(item).forEach(key => {
        if (key.startsWith('column')) {
          columnSums[key] = (columnSums[key] || 0) + item[key];
        }
      });
    });

    this.setState({ columnSums }); // 更新state中的columnSums
  };

  render() {
    const { data, columnSums } = this.state;

    return (
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Column 1</th>
            <th>Column 2</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.column1}</td>
              <td>{item.column2}</td>
            </tr>
          ))}
          <tr>
            <td></td>
            <td>Total:</td>
            <td>{columnSums.column1}</td> {/* 显示列1的总和 */}
            <td>{columnSums.column2}</td> {/* 显示列2的总和 */}
          </tr>
        </tbody>
      </table>
    );
  }
}

export default DataTable;