单击按钮时无法获取 AG 网格数据以刷新

Question

我最近开始重新设计一个项目，正在学习 React，最近，我一直在尝试结合使用 React Query 和 AG Grid 来显示一组数据。

我的数据源自连接到 API 的 React 查询。

这看起来应该很简单......在我对其中一个反应字段进行视觉更改后，我想丢弃它。所以我有一个调用函数的取消按钮...据我了解，这应该简单地调用 setDataRows 并将我的 useQuery 调用中的数据值传递给它。

import { useCallback, useEffect, useRef, useState } from "react";
import { AgGridReact } from "ag-grid-react";
import { useQuery } from "react-query";
import { getMemberList } from "../functions/dataConnections";
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function App( ) {    
    const { data, status } = useQuery('members', getMemberList);
    const gridRef = useRef();
    const [rowData, setRowData] = useState([]);

    const [columnDefs, setColumnDefs] = useState([
         {
            field: 'FirstName',         
            editable: true,         
            headerName: 'First Name*',         
            cellEditor: 'agTextCellEditor'
        },     
        {
            field: 'LastName',         
            editable: true,         
            headerName: 'Last Name*',         
            cellEditor: 'agTextCellEditor'
        }
    ]);

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

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

    if (status === 'loading') {
        return <p>Loading...</p>
    }

    if(status === 'error'){

        return <p>Error!</p>
    }

    return (

        <div className='ag-theme-alpine'  style={{height: 700, width:'100%'}}>
            <button onClick={cancelChangesClicked}>Cancel Changes</button>
            <AgGridReact
                ref={gridRef}
                rowData={rowData} 
                columnDefs={columnDefs}
                enableCellChangeFlash={true}
                pagination={true} 
                paginationAutoPageSize={true} />
        </div>
    )        
};

export default App;

Answer 1

好吧，经过多次挖掘，我找到了答案......尽管其他地方没有明确解释。

当您更改 AG 网格中字段的值时，它会以非编程方式更改。

这意味着它们刷新数据的所有方法仅适用于以编程方式更改字段显示的值。

为了真正刷新网格并清除所有更改...或更准确地说，要将显示值设置回应有的值，您必须在设置数据行之前放置一个刷新（）命令。

只有当您的初始数据是从 Api 中提取的，而不是（像大多数教程似乎是设置的那样）从代码本身中明确编写的数据集提取时，这似乎才是必要的。