Блог

у меня есть функция для группировки в kendo grid, и я хочу вызвать ее при загрузке страницы

 componentDidMount() {
  this.getDeductionInfosList();

this.state=  this.createAppState({
        group: [{ field: "DeductionTypeTitle"   }], true)
  }
 
 getDeductionInfosList(data) {
    GetRestrictionListService.getDeductionInfos( data,this.successGetDeductionInfos);
  }
  successGetDeductionInfos = (response) => {
    if (response.Result) {
      this.setState({
        items: response.Result,
      });
    
    }
  };
createAppState(dataState, collapseAll) {
  const dataResult = process( this.state.items, dataState);
  console.log(this.state.items)
  if (collapseAll) {
    dataResult.data.forEach(dataItem => dataItem.expanded = false);

  }
  this.setState({
    dataResult: dataResult,
      dataState: dataState 
  }) ;


}
  

Но когда я использую его в componentDidMount Возвращает элемент empty array Как сначала получить данные из Api, а затем вызвать функцию this.createAppState

В вашем коде есть некоторые проблемы

1. setState может быть асинхронным, что означает, что состояние не будет обновляться сразу после вызова setState. Это четко указано в документах React:https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
2. Вы никогда не должны напрямую изменять состояние внутри componentDidMount Это также упоминается здесь:https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly Поэтому я предлагаю изменить код, как показано ниже

 

    componentDidMount() {
      this.getDeductionInfosList(data, function(response){
        this.createAppState({
            group: [{ field: "DeductionTypeTitle" }]}, response.Result, true)
      });
    }
    createAppState(dataState, items collapseAll) {
      const dataResult = process( items, dataState);
      if (collapseAll) {
        dataResult.data.forEach(dataItem => dataItem.expanded = false);
      }
      this.setState({
        dataResult: dataResult,
        dataState: dataState 
      });
    }

  

Вы должны преобразовать функцию в async и использовать await для ответа.

async function getDeductionInfosList(data){ await GetRestrictionListService.getDeductionInfos(data, this.successGetDeductionInfos);}