设置道具“onGridReady”或“rowSelection”时“无法将未定义或空值转换为对象”（React）答案

【问题标题】："Cannot convert undefined or null to object" when setting props "onGridReady" or "rowSelection" (React)设置道具“onGridReady”或“rowSelection”时“无法将未定义或空值转换为对象”（React）
【发布时间】：2019-11-18 13:24:26
【问题描述】：

我尝试按照https://www.ag-grid.com/react-grid/上的步骤进行操作

当我这样编码时：

<AgGridReact
 rowSelection="multiple"
....

或

<AgGridReact
   onGridReady={ params => this.gridApi = params.api } 
...

发生错误：

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at agGridColumn.js:63
    at Array.reduce (<anonymous>)
    at Function.umi../node_modules/@ag-grid-community/react/lib/agGridColumn.js.AgGridColumn.assign (agGridColumn.js:62)
    at Function.umi../node_modules/@ag-grid-community/react/lib/agGridColumn.js.AgGridColumn.createColDefFromGridColumn (agGridColumn.js:55)
    at Function.umi../node_modules/@ag-grid-community/react/lib/agGridColumn.js.AgGridColumn.toColDef (agGridColumn.js:38)
    at agGridColumn.js:34

我查看了[ag-grid]标签中之前的问题，似乎没有人遇到过这种情况。我该如何解决？

【问题讨论】：

标签： reactjs ag-grid

【解决方案1】：

还需要添加这些行：-

<div style={{ height: '150px', width: '600px' }} className="ag-theme-balham">
 <button onClick={this.onButtonClick}>Get selected rows</button>
</div>
<AgGridReact
    onGridReady={ params => this.gridApi = params.api }
....

并像这样定义 onButtonClick() 方法：-

onButtonClick = e => {
const selectedNodes = this.gridApi.getSelectedNodes()
const selectedData = selectedNodes.map( node => node.data )
const selectedDataStringPresentation = selectedData.map( node => node.make + ' ' + node.model).join(', ')
alert(`Selected nodes: ${selectedDataStringPresentation}`)
}

在这个方法中，我们访问了grid api对象引用来访问当前选中的grid行节点。(As per documentation)

【讨论】：