如何在React状态中存储react-bootstrap-table的列总计值？

核心思路很简单：先初始化一个状态来存放总计值，然后在表格数据发生变化（比如编辑单元格、新增/删除行）时，重新计算总计并更新这个状态就行。下面分两种常用的组件类型来具体说明：

一、函数组件（React 16.8+ 推荐写法） #

1. 初始化总计状态 #

用useState钩子创建状态，初始值设为0，用来存储最终计算出的总计：

import { useState, useEffect } from 'react';

const [totalAmount, setTotalAmount] = useState(0);
// 假设你的表格数据也存在状态里
const [tableData, setTableData] = useState([...你的初始数据...]);

2. 编写总计计算函数 #

写一个函数遍历表格数据，计算目标列的总和，然后调用setTotalAmount更新状态。这里要注意处理空值或非数字的情况，避免出现NaN：

const calculateTotal = () => {
  const total = tableData.reduce((sum, row) => {
    // 这里假设要计算总计的列字段是amount，根据你的实际字段替换
    const value = parseFloat(row.amount || 0);
    return sum + (isNaN(value) ? 0 : value);
  }, 0);
  setTotalAmount(total);
};

3. 自动触发总计更新 #

用useEffect监听表格数据的变化，只要数据更新，就自动重新计算总计：

useEffect(() => {
  calculateTotal();
}, [tableData]); // 依赖项设为表格数据，数据一变就执行计算

4. 结合表格交互（比如单元格编辑） #

如果你的表格支持编辑功能（比如用react-bootstrap-table2-editor），在编辑完成后更新表格数据状态，useEffect会自动触发总计重新计算：

const handleSaveCell = (oldVal, newVal, row, column) => {
  const updatedData = tableData.map(item => {
    if (item.id === row.id) {
      return { ...item, [column.dataField]: parseFloat(newVal) };
    }
    return item;
  });
  setTableData(updatedData);
};

// 在BootstrapTable组件中配置编辑回调
<BootstrapTable
  keyField="id"
  data={tableData}
  columns={yourColumns}
  cellEdit={cellEditFactory({
    mode: 'click',
    afterSaveCell: handleSaveCell
  })}
/>

5. 使用状态里的总计值 #

你可以把这个状态用在表格的页脚，或者表格外的任意地方：

// 列定义中配置页脚显示总计
const yourColumns = [
  {
    dataField: 'amount',
    text: '金额',
    footerFormatter: () => `总计: $${totalAmount.toFixed(2)}`
  }
];

// 表格外单独显示总计
<p>当前总计：${totalAmount.toFixed(2)}</p>

二、类组件写法 #

如果还在使用类组件，逻辑是一致的，只是用类的state和生命周期函数来实现：

1. 初始化状态 #

class MyTable extends React.Component {
  state = {
    tableData: [...你的初始数据...],
    totalAmount: 0
  };
}

2. 计算并更新总计 #

calculateTotal = () => {
  const { tableData } = this.state;
  const total = tableData.reduce((sum, row) => {
    const value = parseFloat(row.amount || 0);
    return sum + (isNaN(value) ? 0 : value);
  }, 0);
  this.setState({ totalAmount: total });
};

3. 生命周期中触发计算 #

componentDidMount() {
  // 组件挂载时计算初始总计
  this.calculateTotal();
}

componentDidUpdate(prevProps, prevState) {
  // 表格数据变化时重新计算
  if (prevState.tableData !== this.state.tableData) {
    this.calculateTotal();
  }
}

4. 编辑回调与状态使用 #

和函数组件逻辑一致，编辑完成后更新tableData状态，componentDidUpdate会自动触发重新计算，之后在页脚或其他地方使用this.state.totalAmount即可。

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