如何获取AG Grid单元格编辑后的更新rowData？

AG Grid默认会直接修改行数据对象的属性，但不会改变rowData数组的引用——React的useState依赖引用变化来检测更新，所以你的useEffect自然监不到变化。下面是几种简便的解决方法：

方法一：通过onCellValueChanged事件同步state #

每次单元格编辑完成后，手动更新rowData的state，确保数组引用变化触发React更新，这样useEffect就能捕获到数据变化了。

修改后的完整代码：

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import React, { useRef, useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyComponent = (props) => {
  const gridRef = useRef(null);
  const [rowData, setRowData] = useState(props.initialRowData);

  useEffect(() => {
    console.log('更新后的rowData:', rowData);
  }, [rowData]);

  // 单元格编辑完成时触发
  const handleCellValueChanged = (params) => {
    // 复制原数组，修改对应行的数据，确保引用变化
    const updatedRowData = [...rowData];
    const rowIndex = updatedRowData.findIndex(row => row.id === params.data.id);
    if (rowIndex !== -1) {
      updatedRowData[rowIndex] = { ...params.data };
      setRowData(updatedRowData);
    }
  };

  return (
    <div className="grid ag-theme-alpine">
      <AgGridReact
        ref={gridRef}
        rowData={rowData}
        columnDefs={props.columnDefs}
        onCellValueChanged={handleCellValueChanged}
      />
    </div>
  );
};

export default MyComponent;

方法二：用onRowDataChanged处理批量操作 #

如果有批量编辑、行增删这类场景，用这个事件更合适：

// 定义事件处理函数
const handleRowDataChanged = () => {
  // 通过Grid API获取最新所有行数据
  const latestRowData = gridRef.current.api.getAllRows();
  setRowData([...latestRowData]);
};

// 在AgGridReact组件中添加事件
<AgGridReact
  // ...其他已有属性
  onRowDataChanged={handleRowDataChanged}
/>

方法三：直接通过Grid API获取实时数据 #

如果不需要同步维护state，只是偶尔需要最新数据，直接调用Grid的API即可：

// 示例：点击按钮获取最新数据
const getLatestData = () => {
  const latestData = gridRef.current.api.getAllRows();
  console.log('最新行数据:', latestData);
};

注意事项 #

• 必须创建新的数组/对象（比如用扩展运算符...），不能直接修改原rowData或行对象，否则React检测不到变化。
• 用行数据的唯一标识（比如id）匹配行，比用索引更可靠，避免因行排序、过滤导致的索引错乱。

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