Реагировать и Ag-Grid: заполнение selectcelleditor через fetch дает «состояние» неопределенного - PullRequest
Новая
       12

Реагировать и Ag-Grid: заполнение selectcelleditor через fetch дает «состояние» неопределенного

0 голосов
/ 19 декабря 2018

Я использую 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 "]

Теперь я новичок в реагировании иНасколько я понял, лучшее место для извлечения данных из внешнего источника - это componentDidMount и обновление состояния.Я немного читал, и проблема, похоже, в том, что он отображается перед тем, как данные будут выбраны, или состояние может быть обновлено.Я пытался с componentWillMount , но я получал ту же ошибку при попытке изменить поле:

TypeError: Невозможно прочитать свойство 'state' из неопределенного

Что было бы лучшим решением для решения этой проблемы?

Заранее благодарим за любую помощь, советы, примеры.

1 Ответ

0 голосов
/ 29 декабря 2018

Ваша проблема больше похожа на проблему Javascript, чем на что-либо, связанное с ag-grid.
Внутренний this объект возврата ничего не знает о переменной состояния, определенной глобально

У вас есть 2 способапередайте динамические значения в ваш редактор ячейки.

Решение 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)
    }

Пример из документов

...