AG Grid使用valueSetter无法更新底层数据的问题求助

大家好，我遇到了一个AG Grid的问题想求助：

我现在想实现一个基础的计算功能——把「quantity（数量）」和「cost（单价）」相乘得到「total cost（总价）」，用户修改数量或者单价的时候，总价能自动更新，之后我还能从表格的底层数据里拿到更新后的总价。根据官方文档的说明，我应该用valueSetter来处理，但它就是不生效。具体表现是：用户修改单价或者数量后，表格的显示内容确实跟着变了，但底层数据完全没有更新。

我已经试过一个类似问题的解决方案，但不管用。

下面是我按照官方文档示例写的代码：

let gridApi;

const gridOptions = {
    rowData: [ { item: "Shirt", quantity: 10, cost: 2.00 , total: 20.00 } ],
    columnDefs: [
        { field: "item", },
        { field: "quantity", headerName: 'Qty', editable: true, },
        { field: "cost", headerName: 'Cost', editable: true, },
        {
            field: "total",
            headerName: 'Total Cost',
            editable: false,
            valueGetter: params => params.data.quantity * params.data.cost,
            valueSetter: params => {
                params.data.total = params.newValue;
                return true;
            },
        },
    ],
};

document.addEventListener("DOMContentLoaded", function () {
    const gridDiv = document.querySelector("#myGrid");
    gridApi = agGrid.createGrid(gridDiv, gridOptions);
});

$("#ButtonDisplayData").click(function () {
    const allRowData = [];
    gridApi.forEachNode(node => allRowData.push(node.data));

    //Display data using node and directly. Nothing changes
    console.log(allRowData);
    console.log(gridOptions.rowData);
});

就像我刚才说的，我试过那个类似问题里的建议代码，但还是不行，这段尝试的代码如下：

const colId = params.colDef.colId;
const paramsCopy = { ...params.data };
const paramsCopy = params.data ;
paramsCopy[colId] = params.newValue;
params.data = paramsCopy;
params.node.setData(paramsCopy);
return true;

备注：内容来源于stack exchange，提问作者ptownbro