React和Ag-Grid:通过提取填充selectcelleditor会给出未定义的“状态" [英] React and Ag-Grid: populating selectcelleditor through fetch gives 'state' of undefined

问题描述

我正在使用AG-Grid构建一个React应用程序，以显示来自电子表格等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:无法读取未定义的属性状态"

解决这个问题的最佳实践是什么?

在此先感谢您的帮助，提示和示例.

解决方案

与ag-grid无关，您的问题似乎更像是Javascript问题.
返回对象内部的this对全局定义的状态变量一无所知

您有两种将动态值传递到单元格编辑器的方法.

解决方案1:
摆脱cellEditorParams中的函数，并使用类似这样的功能-

cellEditorParams: { 
                values: this.state.selectData
        }

解决方案2:
如果仍要对cellEditorParams使用功能，则可以将功能分离出来，并使用bind传递上下文，如下所示.

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

在您的colDef中-

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

来自 docs

I'm using AG-Grid to build an react application to display data from an api like a spreadsheet. Getting the data and showing it works fine, know I want to edit the data, or change the value with a predefined list, which is also fetched through an api.

This is where I'm stuck since yesterday and I can't figure it out. Here is some example code:

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;

The Data:

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

selectData: ["1", "2"]

Now I'm new with react and as far as I understood, the best place to fetch the data from an external source is in componentDidMount and updating the state. I did some reading, and the problem seems to be, that it is rendered, before the data is fetched, or the state could be updated. I tried with componentWillMount, but I got the same error, when I try to edit the field:

TypeError: Cannot read property 'state' of undefined

What would be the best practice to tackle this problem?

Thanks in advance for any help, hints, examples.

解决方案

Your problem seems more like a Javascript problem than anything to do with ag-grid.
The this inside return object does not know anything about state variable defined globally

You have 2 ways to pass the dynamic values to your cell editor.

Solution 1:
Get rid of the function in cellEditorParams and use it something like this -

cellEditorParams: { 
                values: this.state.selectData
        }

Solution 2:
If you still want to use a function for cellEditorParams, you can separate out the function and pass the context using bind something like this.

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

And in your colDef -

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

Example from docs

这篇关于React和Ag-Grid:通过提取填充selectcelleditor会给出未定义的“状态"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！