使用 Redux 时在 Ag-Grid 中处理删除行的最佳方法是什么？答案

【问题标题】：What is the best way to handle deleting rows in Ag-Grid when using Redux?使用 Redux 时在 Ag-Grid 中处理删除行的最佳方法是什么？
【发布时间】：2020-03-25 10:42:00
【问题描述】：

添加行非常简单 - 只需在我的 Redux 存储中添加一个新行，然后更新我的表。

但是，如果我从 Redux 存储中删除一行，行数据似乎仍然在某个地方徘徊 - 我有一些自定义单元格渲染器，当数据从 Ag-Grid 传递给它们时会触发错误，但是行我的商店中不再存在创建错误。

【问题讨论】：

标签： ag-grid ag-grid-react

【解决方案1】：

此处的代码示例将有助于找出问题的根源 - 同时请检查您在操作商店后是否确实刷新了网格数据 - 类似于：

gridOptions.api.setRowData(gridOptions.rowData)

更多关于 ag-grid 行数据更新可以在这里找到：

https://www.ag-grid.com/javascript-grid-data-update/

https://www.ag-grid.com/react-redux-integration-pt1/

【讨论】：

【解决方案2】：

React 中的数据绑定可以通过使用受控输入来实现。通过将值绑定到状态变量和 onChange 事件来实现受控输入，以在输入值更改时更改状态。

看下面的sn-p：

onRemoveSelected() {

var selectedData = this.gridApi.getSelectedRows();
var res = this.gridApi.updateRowData({ remove: selectedData });

this.props.actions.delete(selectedData.id);

}

【讨论】：

【解决方案3】：

不幸的是，这些建议都不适用于我的情况。

在我的自定义 cellRenderer 中设置调试器显示该行已从 this.props.api.gridOptionsWrapper.gridOptions.rowData 中删除，但仍为删除的行调用 cellRenderer。

我想出的快速修复解决方案只是测试使用 cellRenderer 的行 (this.props.data) 是否存在于 cellRenderer 内的 shouldComponentUpdate 中的 this.props.api.gridOptionsWrapper.gridOptions.rowData 中。

 shouldComponentUpdate(nextProps) {
const { api, data } = nextProps;

const gridRowDataIds = api.gridOptionsWrapper.gridOptions.rowData.map(
  row => {
    return JSON.parse(row.rowMetadata).id;
  }
);

const dataPropsId = JSON.parse(data.rowMetadata).id;

return gridRowDataIds.includes(dataPropsId);

}

注意：rowMetadata 只是一个隐藏列，用于保存有关行的各种属性，例如 id、可见性、是否已被编辑等。

【讨论】：