Ag-grid-react 未正确刷新

Posted 2023-03-28

【中文标题】Ag-grid-react 未正确刷新

【英文标题】：Ag-grid-react Not Refresh properly

【发布时间】：2017-11-15 19:39:53

【问题描述】：

我是 Ag-grid-react 的新手。目前，App 中有一个简单的反应表可以正常工作，但它没有像 Ag-grid 这样的强大功能。我正在考虑切换到 Ag-grid-react。

但是，在实施过程中。我发现当我将外部数据源中的道具更新到 Ag-grid 时。 Ag-grid-react 会自动重新渲染整个表格并忘记之前的设置。

我使用 Meteor 1.4 作为平台，React 15.4.2 作为框架。

问题： this.props.data 是我要显示的外部数据源。它适用于第一次渲染，但是当我从外部更改单元格值时。这个道具变了。它会重新渲染表格。如何避免自动重新渲染而只更改我已更改的单元格值？

我在文档中看到有 API 可以调用并更改 Ag-grid 中的行数据。如果我使用 API，那么每次我的数据更改时都需要在数据源中进行 prev props 和 current props 检查，并使用 API 将更改发送到 Ag-grid。是否应该 React 会自动检查并仅重新渲染我已更改的子组件？

如果有解决此问题的方法，请告诉我。

部分代码：

class MasterDetailExample extends Component 
    constructor(props) 
        super(props);
        this.state = 
            rowData: this.props.data,
            columnDefs: this.createColumnDefs(),
        ;
        this.onGridReady = this.onGridReady.bind(this);
    

    onGridReady(params) 
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
    

...//Some code for createColumnDefs()

    isFullWidthCell(rowNode) 
        return rowNode.level === 1;
    

    getRowHeight(params) 
        let rowIsDetailRow = params.node.level === 1;
        return rowIsDetailRow ? 200 : 25;
    

    getNodeChildDetails(record) 
        if (record.callRecords) 
            return 
                group: true,
                key: record.name,
                children: [record.callRecords],
            ;
         else 
            return null;
        
    

    render() 
        return (
            <div style=height: 1000 , width: "100%" 
                 className="ag-fresh">
                <AgGridReact
                    columnDefs=this.state.columnDefs
                    rowData=this.state.rowData

                    isFullWidthCell=this.isFullWidthCell
                    getRowHeight=this.getRowHeight
                    getNodeChildDetails=this.getNodeChildDetails
                    fullWidthCellRendererFramework=DetailPanelComponent

                    enableSorting
                    enableColResize
                    suppressMenuFilterPanel

                    onGridReady=this.onGridReady>
                </AgGridReact>
            </div>
        );
    
;

【问题讨论】：

如果你传递给 AgGridReact 的 props 改变了，整个组件会重新渲染，没有办法。除非您实现将数据单独获取为自己的 props 的单元格，否则 React 将始终如此。除此之外，我的 2 美分：Ag-grid 有一个翻译 API 的 React 包装器，但根据我的经验，它不能很好地与 React(/Redux) 集成，尽管正在努力：ag-grid.com/ag-grid-react-datagrid。 React-virtualized 是一个有趣的替代方案（我正在使用 Ag-grid，我可能会为此进行更改）。

其实，仔细阅读我刚才复制的链接，我注意到有一个新的deltaRowDataMode 可以回答你的问题。页面的最后一段。

【参考方案1】：

就像@JulienD 已经提到的那样，deltaRowDataMode 是那里的关键。

设置deltaRowDataMode=true 而不是参数rowData 在onGridReady 回调和componentDidUpdate 中使用setRowData() 别忘了getRowNodeId=data => data.id

这将为您比较和更新确切的行。

文档：https://www.ag-grid.com/javascript-grid-data-update/#delta-row-data