React中AG Grid结合cellRenderer实现单元格刷新问题求助

核心思路 #

AG Grid 是数据驱动的表格组件，正确的刷新逻辑应该是更新数据源后通知Grid同步视图，而非直接操作单元格或依赖定时器。以下是几种可靠的实现方案：

1. 单行数据更新后的刷新 #

方案A：框架状态驱动（推荐，以React为例）

直接通过不可变方式更新绑定的rowData状态，Grid会自动检测数据变化并刷新对应单元格：

const [rowData, setRowData] = useState([]);

const updateTargetRow = (updatedRow) => {
  // 不可变更新：替换目标行，保留其他行数据
  setRowData(prevData => 
    prevData.map(row => row.id === updatedRow.id ? updatedRow : row)
  );
};

注意：必须使用不可变更新（如map/filter/扩展运算符），直接修改原数组或行对象不会触发Grid的更新检测。

方案B：AG Grid API 手动触发

如果不需要更新组件状态，可直接调用Grid API更新数据并强制刷新指定单元格：

let gridApi = null;

const onGridReady = (params) => {
  gridApi = params.api;
};

const updateTargetRow = (updatedRow) => {
  // 更新数据源
  gridApi.updateRowData({ update: [updatedRow] });
  // 获取目标行节点并强制刷新
  const targetRowNode = gridApi.getRowNode(updatedRow.id);
  gridApi.refreshCells({
    rowNodes: [targetRowNode],
    force: true, // 强制刷新，跳过缓存检测
    // 可选：指定要刷新的列，避免全列刷新
    // columns: ['columnName1', 'columnName2']
  });
};

2. 删除行后的刷新 #

删除行逻辑更简单，只需移除数据源中的目标行，Grid会自动移除该行并同步视图：

方案A：状态驱动

const deleteTargetRow = (rowId) => {
  setRowData(prevData => prevData.filter(row => row.id !== rowId));
};

方案B：API驱动

const deleteTargetRow = (rowId) => {
  const targetRowNode = gridApi.getRowNode(rowId);
  gridApi.updateRowData({ remove: [targetRowNode.data] });
};

常见错误排查 #

• 不要直接修改原rowData数组或行对象：AG Grid依赖浅比较检测数据变化，直接修改不会触发更新
• 调用refreshCells时务必指定rowNodes：全量刷新（不指定行）会影响性能，且可能导致不必要的视图闪烁
• 确保API调用在Grid初始化完成后：必须在onGridReady回调中获取gridApi，避免调用时API未初始化

内容的提问来源于stack exchange，提问作者Mostafa Briek