点击按钮后无法刷新AG Grid数据的问题求助

你遇到的核心问题是：AG Grid编辑单元格时会直接修改rowData数组内的对象引用，而React Query返回的data与当前rowData指向的是同一批对象。调用setRowData(data)时，由于引用未发生变化，React不会触发组件重渲染，AG Grid也无法感知到数据需要重置。

方法1：传递原始数据的深拷贝 #

通过深拷贝创建新的数据引用，强制React和AG Grid识别到数据变化：

useEffect(() => {
    // 初始化时深拷贝原始数据
    setRowData(data ? JSON.parse(JSON.stringify(data)) : []);
}, [data]);

const cancelChangesClicked = useCallback(() => {
    // 取消时同样传入深拷贝后的原始数据
    setRowData(JSON.parse(JSON.stringify(data)));
}, [data]);

方法2：使用AG Grid API直接刷新 #

利用网格内置API完成数据重置，同时同步本地状态：

const cancelChangesClicked = useCallback(() => {
    if (gridRef.current) {
        // 深拷贝后通过API更新网格数据
        gridRef.current.api.setRowData(JSON.parse(JSON.stringify(data)));
        // 同步更新本地state
        setRowData(JSON.parse(JSON.stringify(data)));
    }
}, [data]);

方法3：维护纯净的原始数据副本（推荐） #

提前保存原始数据的深拷贝副本，取消时直接替换为副本：

import { useMemo } from "react";

function App() {    
    const { data, status } = useQuery('members', getMemberList);
    const gridRef = useRef();
    // 保存原始数据的纯净深拷贝
    const originalData = useMemo(() => data ? JSON.parse(JSON.stringify(data)) : [], [data]);
    const [rowData, setRowData] = useState([]);

    useEffect(() => {
        setRowData(originalData);
    }, [originalData]);

    const cancelChangesClicked = useCallback(() => {
        setRowData(originalData);
    }, [originalData]);

    // 其余代码保持不变...
}

AG Grid与React的更新机制均依赖引用变化检测数据更新。当直接修改数组内的对象时，数组本身的引用未改变，因此即使调用setRowData传入同一引用，两者都不会触发更新逻辑。通过深拷贝生成新引用，就能让它们识别到数据已变更，完成重置操作。

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