更改handsonTable后如何更新状态？

Question

financialsettings: {
          data: [{description:"", currency:"", amount: "", exRate: "", quantity: "", amountExclusiveGst: "", gst: "", gstAmount: "", amountInclGst: ""}],
          minSpareRows: 0,
          contextMenu: true,
          rowHeaders:true, 
          manualColumnResize: true,
          columnSorting: true, 
          manualRowResize: true, 
          manualRowMove: true,   
          manualColumnMove: true,
          colWidths: [200, 130, 100,120, 100, 150,100,100,130],
          afterChange: function(changes, source){
            let hotInstance = this;
            if(changes){
                for(let changeIdx=0; changeIdx<changes.length; changeIdx++){
                    let change = changes[changeIdx];
                    let row = change[0];
                    let columnName = change[1];
                    if(["gst", "amount", "exRate", "quantity"].indexOf(columnName) > -1){
                        let gst = hotInstance.getDataAtRowProp(row, "gst") || 0;
                        let amount = hotInstance.getDataAtRowProp(row, "amount") || 0;
                        let exRate = hotInstance.getDataAtRowProp(row, "exRate") || 0;
                        let quantity = hotInstance.getDataAtRowProp(row, "quantity") || 0;
                        hotInstance.setDataAtRowProp(row, "gstAmount", ((gst*(amount*exRate*quantity))/100));
                     }

               }

            }
        },

        afterInit: function(){

        }
        },

render(){       

        var totalGst = this.state.financialsettings.data.map(el=> el.gstAmount).reduce((a, b) => a + b, 0);
        var totalExclusiveGST = this.state.financialsettings.data.map(el=> el.amountExclusiveGst).reduce((a, b) => a + b, 0);

    return (
        <div>
              <div className="col-md-12">
                    <HotTable root="hot" ref="hot" settings={this.state.financialsettings} width="100%" strechH="all" />
              </div>

              <input className="form-control" id="inputdefault" type="text" value={totalExclusiveGST} disabled/>
              <input className="form-control" id="inputdefault" type="text" value={totalGst} disabled/>
        </div>    
    )
}

我正在使用react HandsonTable，对于数据更改，我正在使用afterChange函数，但是我能够计算所需的计算，但是从更改值后的handontable来看，我无法在渲染中获得更新的更改。

如何在afterChange之后更新状态。