RecatJS: How to wait for REST Api response before loading the data in a table

Question

I'm trying to get data from an Airtable table using their API and displaying the data in a table. Like this:

import React from 'react';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Search, Page } from '@syncfusion/ej2-react-grids';

import { employeesData, employeesGrid } from '../data/dummy';
import { Header } from '../components';
import { getRotatedRectangleCoordinates } from '@syncfusion/ej2-react-charts';

const Users = () => {


  var Airtable = require('airtable');
  var base = new Airtable({ apiKey: 'API-KEY' }).base('APP-ID');
  var listOfUsers = []

  base('Users').select({
    maxRecords: 200,
    view: "Grid view",
    fields: ["Nom complet", "Email"]
  }).firstPage(function (err, records) {
    if (err) { console.error(err); return; }
    records.forEach(function (record) {
      listOfUsers.push(record.fields);
    });
  });

  console.log(listOfUsers)

  const toolbarOptions = ['Search'];

  const editing = { allowDeleting: true, allowEditing: true };

  return (
    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
      <Header category="Page" title="Users" />
      <GridComponent
        dataSource={listOfUsers}
        width="auto"
        allowPaging
        allowSorting
        pageSettings={{ pageCount: 5 }}
        editSettings={editing}
        toolbar={toolbarOptions}
      >
        <ColumnsDirective>
          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
          {employeesGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
        </ColumnsDirective>
        <Inject services={[Search, Page]} />

      </GridComponent>
    </div>
  );
};
export default Users;

The data is parsed to listOfUsers().

The problem is that, I think, the page and the table loads before the data gets retrieved, which displays an error on the page :

Iavor Orlyov · Answer 1 · 2022-07-21T08:30:44.603

1

The problem is that you are pushing items in listOfUsers. React needs new instance every time you change something so it can acknowledge this change. What you have to do is:

const [listOfUsers, setListOfUsers] = useState([]);

And later when you are updating listOfUsers with every record

setListIfUsers([...listOfRecords, record.fields]);

edited Jul 21 '22 at 08:30

answered Jul 21 '22 at 07:50

Iavor Orlyov

512
1
4
15

I see how this could work, but I can't manage to make it work... I only get the first record multiple times – Polymood Jul 21 '22 at 08:26
You should check you logic if records are as you expected – Iavor Orlyov Jul 21 '22 at 08:32
The records are normal, I just noticed that it is actualy the last record that is only added – Polymood Jul 21 '22 at 08:38

RecatJS: How to wait for REST Api response before loading the data in a table

1 Answers1