Пример интеграции API между response-data-grid и ax ios: делаю это правильно вместо моего взлома

Question

Я экспериментировал с примером основы c для реагирующей сетки данных и смог отобразить таблицу с некоторым содержимым для конкретной страницы c и заставил ее работать (несколько) Пример stati c работал очень хорошо сам по себе, но я изо всех сил пытался интегрировать его с Ax ios и моей серверной базой данных. Полуработающий код приведен ниже, но это своего рода хак, и в консоли отображается предупреждение об ошибке.

Может кто-нибудь предложить лучший или более правильный способ получения данных через Ax ios и API и рендеринг на странице?

import React, {Component} from "react";
import ReactDataGrid from 'react-data-grid';
import ReactDOM from "react-dom";
import axios from "axios";
const config = require('../config.json');

const columns = [{
    key: 'Name',
    name: 'Name',
    resizable: true,
    width: 200
  },
  {
    key: 'State',
    name: 'State',
    resizable: true,
    width: 20
  },
  {
    key: 'CreationDateTime',
    name: 'Creation Date',
    resizable: true,
    width: 200
  }
];

const rows = [{
  Name: '',
  State: '',
  CreationDateTime: ''
}, {
  Name: '',
  State: '',
  CreationDateTime: ''
}, {
  Name: '',
  State: '',
  CreationDateTime: ''
}, {
  Name: '',
  State: '',
  CreationDateTime: ''
}];

export default class ListView extends React.Component {

    state = {
      rows
    };

    fetchLedgers = async() => {
      // add call to AWS API Gateway to fetch ledgers here
      // then set them in state
      try {
        const res = await axios.get(`${config.api.invokeUrl}/ledger`);
        const rows = res.data;
        this.setState({
          rows: rows
        });
        console.log("ledgers array" + rows);
        console.log("ledgers1" + JSON.stringify(rows));


        //  console.log;
      } catch (err) {
        console.log(`An error has occurred: ${err}`);
      }
    }

    componentDidMount = () => {
      this.fetchLedgers();
    }

    onGridRowsUpdated = ({
      fromRow,
      toRow,
      updated
    }) => {
      this.setState(state => {
        const rows = state.rows.slice();
        for (let i = fromRow; i <= toRow; i++) {
          rows[i] = { ...rows[i],
            ...updated
          };
        }
        return {
          rows
        };
      });
    };

    render() {
      return ( <
        ReactDataGrid columns = {
          columns
        }
        rowGetter = {
          i => this.state.rows[i]
        }
        rowsCount = {
          4
        }
        onGridRowsUpdated = {
          this.onGridRowsUpdated
        }
        enableCellSelect = {
          true
        }
        />)
      };
    }
    const rootElement = document.getElementById("root");
    ReactDOM.render( < ListView / > , rootElement);

Пример ответа от моего API:

[
  {"Name":"Realestate", "State":"ACTIVE", "CreationDateTime":"2020-01-29T14:51:47.394Z"},
  {"Name":"ledgertest5", "State":"ACTIVE", "CreationDateTime":"2020-02-03T21:34:17.952Z"},
  {"Name":"testledger", "State":"ACTIVE", "CreationDateTime":"2020-02-21T16:18:19.668Z"},
  {"Name":"vehicle-registration", "State":"ACTIVE", "CreationDateTime":"2020-02-21T17:14:41.147Z"}
]

В консоли отображаются следующие предупреждения / ошибки:

Предупреждение. Невозможно выполнить обновление состояния React для отключенного компонента. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount. в ListView (в ListView. js: 78)

Код работал только после добавления пустых значений для, но это не масштабируемое решение:

 const rows = [
  {Name: '', State: '', CreationDateTime: ''}, 
  {Name: '', State: '', CreationDateTime: ''}, 
  {Name: '', State: '', CreationDateTime: ''}, 
  {Name: '', State: '', CreationDateTime: ''} 
];