AG Grid React中rowData调用API更新后未同步问题

核心原因 #

AG Grid的API方法（rowNode.setData()、api.applyTransaction()、rowNode.updateData()等）仅直接修改组件内部维护的行节点数据，不会自动同步更新你的React组件state。React的state由开发者自行维护，AG Grid不会主动修改它，所以你打印state中的rowData时会看到旧值，而表格显示是AG Grid内部数据更新后的结果。

解决方案 #

方式一：通过React State驱动数据更新（推荐） #

遵循React单向数据流原则，直接修改并更新state中的rowData，AG Grid会因props变化自动重新渲染：

const handleUpdateRow = (targetRowId, newData) => {
  // 复制原数组，避免直接修改state
  const updatedRows = rowData.map(row => 
    row.id === targetRowId ? {...row, ...newData} : row
  );
  setRowData(updatedRows);
};

这种方式能保证state与AG Grid显示的数据完全一致，避免数据不一致的问题。

方式二：使用AG Grid API后手动同步State #

如果业务场景必须使用AG Grid API操作数据，操作完成后需手动将AG Grid内部的最新数据同步到state：

const handleUpdateWithApi = (rowNode, newData) => {
  rowNode.setData(newData); // 更新AG Grid内部数据
  // 从AG Grid获取所有行的最新数据，同步到state
  const latestRowData = gridApi.current.getAllRows().map(node => node.data);
  setRowData(latestRowData);
};

注意：确保你的行数据有唯一rowId（通过getRowId配置），避免同步时出现数据匹配错误。

为什么之前的方法无法同步State #

• rowNode.setData()/rowNode.updateData()：仅修改AG Grid内部行节点，不触发React state更新。
• api.applyTransaction()：同样仅操作AG Grid内部数据，不会同步到组件state。
• rowNode.setDataValue()：仅支持更新单个扁平字段，不支持嵌套对象，无法满足你的项目需求。

内容的提问来源于stack exchange，提问作者Itamar Shubin