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

Question

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

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

Answer 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/

Answer 2

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

请参阅以下片段：

onRemoveSelected() {
var selectedData = this.gridApi.getSelectedRows();
var res = this.gridApi.updateRowData({ remove: selectedData });
this.props.actions.delete(selectedData.id);

}

Answer 3

不幸的是，这些建议在我的情况下都没有奏效。

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

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

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、可见性、是否已编辑等。