React 和 Ag-Grid：通过 fetch 填充 selectcelleditor 给出 'state' of undefined

Question

我正在使用 AG-Grid 构建一个反应应用程序来显示来自 api 的数据，如电子表格。获取数据并显示它工作正常，知道我想编辑数据，或使用预定义列表更改值，该列表也是通过 api.

获取的

这就是我从昨天开始就卡住的地方，我想不通。这是一些示例代码：

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';

class AgGridExample extends Component {
   constructor(props) {
      super(props);

      this.state = {
          rowData: [],
          selectData: []
      };
  }

   columnDefs = [
    {
        headerName: "MyListData", field: "item", editable: true, cellEditor: "agSelectCellEditor",
        cellEditorParams: function () { // cellEditorParams: {values: ["1", "2"]}
            return {
                values: this.state.selectData
            }
        }
    },
    { headerName: "value", field: "value", editable: true },
];

/**
 * fetch all necessary data from data sources
 */
componentDidMount() {
    fetch('http://localhost:5000/api/rowdata')
        .then(result => result.json())
        .then(rowData => this.setState({ rowData }))

    fetch('http://localhost:5000/api/selectdata')
        .then(result => result.json())
        .then(selectData => this.setState({ selectData }))
};

render() {
    return (
        <AgGridReact
            enableSorting={true}
            enableFilter={true}
            rowData={this.state.rowData}
            columnDefs={this.columnDefs}>
        </AgGridReact>
    );
};
}


export default AgGridExample;

数据：

rowData: [{"value": "a", "item":"1"}, {"value": "b", "item":"2"}]

selectData: ["1", "2"]

现在我是 React 的新手，据我所知，从外部源获取数据的最佳位置是 componentDidMount 并更新状态。我做了一些阅读，问题似乎是在获取数据或更新状态之前呈现它。我尝试使用 componentWillMount，但是当我尝试编辑该字段时出现了同样的错误：

TypeError: Cannot read property 'state' of undefined

解决这个问题的最佳做法是什么？

提前感谢您提供的任何帮助、提示和示例。

Answer 1

你的问题看起来更像是一个 Javascript 问题，而不是与 ag-grid 有关的任何问题。
return 对象中的 this 对全局定义的状态变量一无所知

您有两种方法可以将动态值传递给您的单元格编辑器。

解决方案一：
摆脱 cellEditorParams 中的功能并像这样使用它 -

cellEditorParams: { 
                values: this.state.selectData
        }

方案二：
如果您仍然想为 cellEditorParams 使用一个函数，您可以分离出该函数并使用 bind 传递上下文，就像这样。

  testVals() {
    return {
      values : this.state.selectData
    }
  }

在你的 colDef 中 -

   {
        headerName: "MyListData", 
        field: "item", 
        editable: true, 
        cellEditor: "agSelectCellEditor",
        cellEditorParams: this.testVals.bind(this)
    }

示例来自 docs

React 和 Ag-Grid：通过 fetch 填充 selectcelleditor 给出 'state' of undefined

React and Ag-Grid: populating selectcelleditor through fetch gives 'state' of undefined

javascript

reactjs

ag-grid

ag-grid-react