Ag grid AgGridReact组件在autoGroupColumnDef更改时不更新

我正在使用ag Grid和React来测试他们的企业功能。我想在运行时更改行分组列名，但我无法做到这一点

当我对AgGridReact的columnDefs prop进行更改时，这些更改会反映在表中。但不会呈现对autoGroupColumnDef属性的更改，即使调试日志显示已检测到更改。下面是TypeScript中的一个示例（使用React钩子表示状态）：

import React，{FC，useState}来自“React”；
进口“ag电网企业”；
从'ag grid react'导入{AgGridReact}；
导入'ag grid community/dist/styles/ag grid.css'；
导入'ag grid community/dist/styles/ag theme balham.css'；
const AgGridTest:FC=（）=>{
常量行数据=[
{col1:a'，col2:0，col3:0}，
{col1:b'，col2:1，col3:1}，
{col1:c'，col2:2，col3:0}，
{col1:d'，col2:3，col3:1}，
{col1:a'，col2:4，col3:0}，
{col1:b'，col2:5，col3:1}，
{col1:c'，col2:6，col3:0}，
{col1:d'，col2:7，col3:1}，
];
const[columnDefs，setColumnDefs]=useState([
{headerName:'Column 1'，field:'col1'，rowGroup:true}，//初始组列
{headerName:'Column 2'，field:'col2'，rowGroup:false}，
{headerName:'Column 3'，field:'col3'，rowGroup:false}，
]);
常量[autoGroupColumnDef，setAutoGroupColumnDef]=useState(
{headerName:'col1 Initial'}//自动组列名的开头为'col1 Initial'
);
constgroupbycolumn=（字段：string）：void=>{
//这将成功更改分组列。。。
setColumnDefs(
prevColumnDefs=>prevColumnDefs.map(
colDef=>colDef.field==字段？
{…colDef，行组：true}：
{…colDef，行组：false}
)
);
//…但这不会更改自动组列名！
setAutoGroupColumnDef({
headerName:“${field}组列”，
});
}
返回(
groupByColumn（'col1'）}>按列1分组
groupByColumn（'col2'）}>按列2分组
但这也不起作用：

const AgGridTest:FC=（）=>{
// ...
//将api存储在实例变量中
//当on ready事件使其可用时
constapi=useRef（）；
const onGridReady=（参数：GridReadyEvent）=>{
api.current=params.api；
}
constgroupbycolumn=（字段：string）：void=>{
//…重新分配分组列。。。
}
useffect（（）=>{
//在呈现分组更改后运行此操作
gridApi.current&&gridApi.current.refreshHeader（）；//不工作
});
返回(
仅提及通过gridOptions设置属性。API具有更新常规列定义的函数：。这是当columnDefs属性更改时AgGridReact调用的（相关代码段和）。但是，当更改autoGroupColumnDef属性时，AgGridReact只会覆盖gridOptions对象（）中的autoGroupColumnDef属性。似乎没有任何关联的setter函数

甚至似乎没有办法获取自动组列对象。只返回常规列。自动组列列表单独保存在columnController（）中的一个私有实例变量中，该变量公开了一个公共GetPrimary和Secondary以及自动列访问器，只是我们无法访问columnController API

关于如何在运行时修改自动组列名，或者我必须禁用它们和吗

有人问了这个问题，但他们从未得到答案（我不理解第二个问题中的评论）。
正如您可能知道的，ag grid是纯js的，React和Angular版本就是围绕它的包装

我已经使用Angular版本大约一年了，并且对它进行了大量定制，我发现许多gridOptions，即使它们是绑定属性，在网格初始实例化后也没有效果。我怀疑autoGroupColumnDef就是其中之一

因此，我会尝试根据您引用的链接创建您自己的列组

如果这不起作用，（丑陋的）替代方法是销毁网格，然后使用反映新autoGroupColumnDef的新网格选项重新创建它

另一条来之不易的建议：
如果使用setColumnDefs API来更新列定义，它可以正常工作，但是，如果以后要保存和恢复网格状态，则从API获取网格状态会生成带有“_1”的列名附加到它们之后，如果您使用它设置列状态，您将得到一个关于找不到列的错误。解决方法是首先将columnDefs设置为空数组，然后设置实际的columnDefs。
使用setColumnDefs API会改变列名。这让我陷入了一个兔子洞，可能会对其他人有用

太长，读不下去了
如果要在运行时通过API（例如API.setColumnDefs）而不是仅通过ag Grid的UI控件（例如允许用户通过单击和拖动来调整列的大小）更改列顺序、宽度、排序状态、筛选、行分组或数据透视，则必须：

为每列指定唯一的
colId
将
gridOptions.deltaColumnMode
设置为true
如果您还希望允许用户修改这些属性（例如，单击并拖动调整大小），请添加一个显式处理程序，以监视这些更改并相应地更新ColumnDef
我现在解释一下原因（有些部分我还不清楚）

如果您提供COLID但将deltaColumnMode保留为false。。。
我做了一个示例，您可以在其中创建一个新列，并更新新列和现有列的排序顺序、宽度以及它是否是行分组列。首先要注意的是，列1的columnDefs中的初始宽度已应用，但单击“增加宽度”对于现有列或新列，不执行任何操作。分组不起作用
 aggregateMyColumn() {
    this.gridColumnApi.setRowGroupColumns(this.orderedAggregationFields);
    if(this.orderedAggregationFields.length > 0) {
      const container = document.querySelector("#agGrid");
      const matches = container.querySelector("div[col-id='ag-Grid-AutoColumn']");
      const final = container.querySelector("span[role='columnheader']");
      this.renderer.setProperty(final, 'innerHTML', this.orderedAggregationFields.toString());
    }
 }