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

Question

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

但是，如果我从我的 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

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

在我的自定义 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、可见性、是否已编辑等。

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

What is the best way to handle deleting rows in Ag-Grid when using Redux?

ag-grid

ag-grid-react