React.js：如何从 ag 网格中删除行？

Question

我正在使用 react 和 ag 网格。我想从网格中删除行。

这里是代码

onButtonClick = e => {
  this.setState({
    visible: true
  });
  const selectedNodes = this.gridApi.getSelectedNodes();
  let deletedRow = selectedNodes;
  e.gridApi.updateRowData({ remove: [deletedRow] });
};

当我使用这个而不是 e 时，我得到：ag-Grid: 由于找不到对象而找不到数据项

<button onClick={this.onButtonClick}>delete</button>;
<AgGridReact
  onGridReady={params => (this.gridApi = params.api)}
  rowSelection="multiple"
  columnDefs={this.state.columnDefs}
  rowData={this.state.rowData}
  defaultColDef={{
    editable: true
  }}
/>;

console.log(deletedRow)

无法显示错误。打开浏览器控制台查看

g-Grid：找不到数据项，因为找不到对象

错误：对象太大而无法检查。打开浏览器控制台进行查看。 在对象。 （预览-2e4d276ba818b5932108b.js:1） 在 JSON.stringify() 在 P.r.错误 (preview-2e4d276ba818b5932108b.js:1) 在 P (preview-2e4d276ba818b5932108b.js:1) 在 preview-2e4d276ba818b5932108b.js:1 在 Array.map() 在 Q (preview-2e4d276ba818b5932108b.js:1) 在控制台。 [作为日志] (preview-2e4d276ba818b5932108b.js:1) 在 App._this.onButtonClick (index.js:44) 在 HTMLUnknownElement.callCallback (react-dom.development.js:336)

[RowNode] 0：RowNode childrenMapped：{} 可选：true objectId: 1 alreadyRendered: true 突出显示: null selected: true mainEventService: EventService {allSyncListeners: Map(75), allAsyncListeners: Map(56), globalSyncListeners: Set(0), globalAsyncListeners: Set(1), asyncFunctionsQueue: Array(0), …} gridOptionsWrapper：GridOptionsWrapper {propertyEventService： 事件服务，domDataKey：“__AG_0.09475464623441865”，layoutElements： Array(5), gridOptions: {…}, columnController: ColumnController, …} 选择控制器：选择控制器 {事件服务：事件服务， rowModel：ClientSideRowModel，gridOptionsWrapper：GridOptionsWrapper， columnApi: ColumnApi, gridApi: GridApi, …} columnController: ColumnController {primaryHeaderRowCount：1，secondaryHeaderRowCount： 0，secondaryColumnsPresent：假，gridHeaderRowCount：1， 显示的LeftColumns：数组（0），...} valueService：ValueService {初始化：真，gridOptionsWrapper：GridOptionsWrapper， 表达式服务：表达式服务，列控制器： ColumnController, eventService: EventService, …} rowModel: ClientSideRowModel {gridOptionsWrapper：GridOptionsWrapper， 列控制器：列控制器，过滤器管理器：过滤器管理器， $范围：未定义，选择控制器：选择控制器，...} 上下文：上下文 {beanWrappers：{…}，componentsMappedByName：{…}， 销毁：假，contextParams：{…}，记录器：记录器} valueCache： ValueCache {cacheVersion: 2, gridOptionsWrapper: GridOptionsWrapper, 活动：假，永不过期：假} columnApi：ColumnApi {columnController: ColumnController} gridApi: GridApi {detailGridInfoMap: {…}, immutableService: ImmutableService, csvCreator: CsvCreator, excelCreator: null, rowRenderer: RowRenderer, …}组：假主人：假扩展：假canFlower：假父： RowNode {childrenMapped：null，可选择：true，__objectId：0， alreadyRendered：false，突出显示：null，...} 级别：0 数据：日期： "2020-03-13" Price1: 31.72 Price2: 33 Price3: 0.929 Price4: 0.907 价格 5：1.097 价格 6：1.147 价格 7：1.175 价格 8：1.122 价格 9：1.272 价格 10：0.977 价格 11：0.293 __proto：对象 id：“0” childrenAfterFilter：未定义 allChildrenCount：null firstChild：true lastChild：false childIndex：0 uiLevel：0 oldRowTop：未定义 rowTop：0 rowHeight：28 rowHeightEstimated: false rowIndex: 0 eventService: EventService {allSyncListeners: Map(16), allAsyncListeners: Map(8), globalSyncListeners: Set(0), globalAsyncListeners: Set(0), asyncFunctionsQueue：数组（0），...} proto：对象长度：1 原型：数组（0）

Answer 1

我通过替换来解决问题

const selectedNodes = this.gridApi.getSelectedNodes();

与

var selectedNodes = this.gridApi.getSelectedRows();

Answer 2

您不必拨打e，而是可以直接拨打电话

this.gridApi.updateRowData({ remove: [deletedRow] }) 

Answer 3

替换this.gridApi.updateRowData({ remove: [deletedRow] })

通过

this.gridApi.updateRowData({ remove: [deletedRow.data] })