只有在我返回单元格编辑后，React-Bootstrap-Table2 的单元格才会刷新

Question

所以我的代码类似于代码沙箱链接中显示的代码。 codesandbox

class CostPage extends Component {
  constructor() {
    super();
    this.state = {};

    this.tableColumns = [
      { dataField: "name", text: "Product", editable: false },
      { dataField: "year1", text: "Year1", editable: true, type: "number" },
      { dataField: "year2", text: "Year2", editable: true, type: "number" }
    ];

    this.tableContents = [
      { id: 1, name: "Rollup", year1: 0, year2: 0, isParent: true },
      { id: 2, name: "Nintendo", year1: 10, year2: 20, isParent: false },
      { id: 3, name: "Xbox", year1: 30, year2: 40, isParent: false },
      { id: 4, name: "Playstation", year1: 50, year2: 60, isParent: false }
    ];

    this.displayTable = this.displayTable.bind(this);
    this.afterSaveCell = this.afterSaveCell.bind(this);

    this.UpdateRollup();
  }

  afterSaveCell(oldValue, newValue, row, column) {
    this.UpdateRollup();
    this.forceUpdate();
  }

  // In reality this would sum the column vals, but this will work for now
  UpdateRollup() {
    this.tableContents[0]["year1"] += 1;
    this.tableContents[0]["year2"] += 1;
  }

  displayTable() {
    return (
      <BootstrapTable
        keyField="id"
        data={this.tableContents}
        columns={this.tableColumns}
        cellEdit={cellEditFactory({
          mode: "dbclick",
          autoSelectText: true,
          afterSaveCell: (oldValue, newValue, row, column) => {
            this.afterSaveCell(oldValue, newValue, row, column);
          }
        })}
      />
    );
  }

  render() {
    return <div className="App">{this.displayTable()}</div>;
  }
}

目标：当我去更新一个单元格的成本时，我想在将值更改为原始单元格后更新汇总行中的另一个单元格。

预期：我希望看到原始单元格的变化以及汇总值，但事实并非如此。

现实：我看到原始值发生了变化，但没有看到汇总。一旦我返回编辑值已更改的任何单元格（汇总单元格），我确实会看到汇总值更新。

问题：我是否在反应生命周期中滥用了表格？让我正在编辑的单元格以及表格中的汇总单元格正确更新的正确方法是什么？

任何帮助将不胜感激。

Answer 1

我刚刚解决了这个问题。除非单击表格排序，否则我的问题数据未加载到表格中：

我所做的改变：

让componentDidMount在这个函数内部调用async和axios调用await。

async componentDidMount() {
  const {data} = await axios.get(url);
   this.setState({orders: data});
}