在空的ag-grid中动态添加和删除行，第一次行被删除，第二次抛出错误

IT技术 reactjs ag-grid ag-grid-react
2021-05-23 03:04:08

最初我显示带有标题名称的空网格。单击添加按钮新的空行应添加删除图标。我可以动态添加行 ag-grid。第一次如果我在添加后删除行，它会被删除，但第二次它给我以下错误..

第二次，它给了我错误。

未捕获的类型错误：无法读取未定义的属性“数据”

调用添加行的方法：-

createNewRowData() {
  let newData = {
    tableName: '',
    schemaName: '',
    columnName: '',
    condition: ''
  };
  console.log('newDATA', newData);
  this.setState({
    newCount:this.state.newCount+1
})
}
onAddRow() {
  let newItem = this.createNewRowData.bind(this);
  let res = this.state.gridOptions.api.updateRowData({add: [newItem]});
}

删除时调用的方法：- 

methodFromParent(cell) {
  const rowNode = this.state.gridOptions.api.getRowNode(cell.rowIndex);
  this.state.gridOptions.api.updateRowData({remove: [rowNode.data]});
  this.state.newCount--;
}

我的用于删除的自定义单元格渲染器出现在我在 colDefs 中使用的每一行中：-

export default class DeleteButtonRenderer extends Component {
  constructor(props) {
    super(props);
    this.invokeParentMethod = this.invokeParentMethod.bind(this);
  }
  invokeParentMethod(e) {
    this.props.context.componentParent.methodFromParent(this.props.node);
  }
  render() {
    return (
      <span>
        <a
          style={{ height: 20, lineHeight: 0.5 }}
          onClick={this.invokeParentMethod}
        >
          <i className="far fa-trash-alt fa-2x" />
        </a>
      </span>
    );
  }
}
1个回答

因此，方法methodFromParent(rowIndex)- 具有rowIndex输入属性，但它不属于index，您e.target.id在此方法中使用.methodFromParent(+e.target.id)- 因为index- 这就是您遇到问题的原因。

在RowNode界面上，您可以访问rowIndex 

/** The index of this node in the grid, only valid if node is displayed in the grid, otherwise it should be ignored as old index may be present */
rowIndex: number;

在自定义渲染器上，您可以访问完整node数据（RowNode接口），因此只需传递node.rowIndex给invokeParentMethod函数。

第一次它可以工作，因为它可能id与 相同index，但无论如何，要了解更多详细信息，我需要获取您的真实代码，因此，如果可以，请提供 plinkr 或 stackblitz。

更新

所以，我深入研究了你的样本，在这里我发现了：

首先，this.createNewRowData.bind(this)- 是引用绑定，需要使用隐式，但这里不需要，需要直接执行（显式），尽量console.log(newItem)清晰，会得到function引用。

其次，createNewRowData-不返回一个新的对象，而当你将修复的功能等exectutionlet newItem = this.createNewRowData();这将是undefined。

第三，如果您打算empty在网格中使用对象，那么updateRowData({remove: [rowNode.data]});将不起作用，您需要使用不同的方式 for remove，例如 - selection。 回答为什么

自定义渲染器

invokeParentMethod(){
    this.props.node.setSelected(true);
    this.props.context.componentParent.methodFromParent();
}

父级（主网格组件）

methodFromParent(){
    let selectedData = this.gridApi.getSelectedRows();
    this.gridApi.updateRowData({ remove: selectedData });
};

Demo

其它你可能感兴趣的问题
上一篇使用 Jest 时如何模拟 npm uniqid 以进行react单元测试？ 下一篇UI 不会在状态更改时更新