Ag-grid React开启reactUi时批量设置列可见性报setAriaColIndex未定义错误

开启reactUi={true}配置后，ag-grid会使用React组件渲染网格UI部分，每一次调用setColumnVisible都会触发React层面的同步重渲染。你在循环中批量调用该方法时，短时间内触发了多次无批处理的状态更新，导致React渲染冲突报错。关闭reactUi后ag-grid使用原生JS渲染层，自带更新合并逻辑，因此不会出现该问题。

直接使用ag-grid提供的批量列可见性设置APIsetColumnsVisible（注意是复数形式），一次性传入所有需要调整的列ID数组，仅触发一次更新，避免重复渲染冲突，修改后代码如下：

const handleOnChange = (e, i) => {
  const columnApi = props.columnApi;
  columnApi.setColumnVisible(e.target.value, e.target.checked);
};

const handleAllChange = (e) => {
  const columnApi = props.columnApi;
  // 提取所有列的colId组成数组，一次性设置可见性
  const allColIds = columns.map(col => col.colId);
  columnApi.setColumnsVisible(allColIds, e.target.checked);
};

如果需要同时调整更多列属性，也可以用applyColumnState统一提交状态：

const handleAllChange = (e) => {
  const columnApi = props.columnApi;
  columnApi.applyColumnState({
    state: columns.map(col => ({
      colId: col.colId,
      hide: !e.target.checked
    }))
  });
};

内容的提问来源于stack exchange，提问作者Juan Bello