当参数更改时，React Ag Grid Framework组件不会重新渲染

Question

我正在使用React Ag-Grid。 我正在尝试计算列Sum并将其显示在状态栏中

它看起来像这样：

我的组件非常简单：

import React from "react";

const AgGridSumComponent = ({sum, sumName}) => {
    return (
        <div className="container">
            <div style={{marginTop: '9px'}}>
                <span className="component">
                    Total {sumName + ' Sum: ' + sum}
                </span>
            </div>
        </div>
    );
};

export default AgGridSumComponent;

及其定义如下：

 render() {
        var columnDef = this.props.isCheckbox === true ? this.state.columnDefs : this.state.columnDefsChannel;
        var WrappedAgGridSumComponent = () => <AgGridSumComponent sum={this.state.totalSpendSum} sumName={'Spend'} />;
        var frameworkComponents= { statusBarComponent: WrappedAgGridSumComponent };
        return (
            <div
                id="myGrid"
                style={{
                    height: this.props.tableHeight,
                    width: "100%",
                }}
                className="ag-theme-balham"
            >
                <AgGridReact
                    columnDefs={columnDef}
                    rowData={this.props.rowData}
                    components={this.state.components}
                    getRowHeight={this.state.getRowHeight}
                    defaultColDef={this.state.defaultColDef}
                    rowSelection={this.state.rowSelection}
                    suppressRowClickSelection={true}
                    onSelectionChanged={this.props.onSelectionChanged.bind(this)}

                    onGridReady={this.onGridReady}

                    columnTypes={ this.state.columnTypes }

                    suppressAggFuncInHeader={true}
                    enableCellChangeFlash={true}
                    statusBar={this.state.statusBar}
                    frameworkComponents={frameworkComponents}
                />
            </div>
        );

当计算总和并将其存储在聚集组件状态（this.state.totalSpendSum）中时，聚集将不会重新呈现之前的总和，如图所示，总和保持为零（这是累积前的默认状态值）带来的行）