ReactJS：如何在将数据加载到表中之前等待 REST Api 响应答案

【问题标题】：RecatJS: How to wait for REST Api response before loading the data in a tableReactJS：如何在将数据加载到表中之前等待 REST Api 响应
【发布时间】：2022-07-21 15:50:31
【问题描述】：

我正在尝试使用他们的 API 从 Airtable 表中获取数据并在表中显示数据。像这样：

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;

数据被解析为listOfUsers()。

我认为，问题在于，页面和表格在数据被检索之前加载，这会在页面上显示错误：

【问题讨论】：

标签： reactjs async-await airtable

【解决方案1】：

问题是您在listOfUsers 中推送项目。每次您更改某些内容时，React 都需要新实例，以便它可以确认此更改。你要做的是：

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

稍后当您使用每个 record 更新 listOfUsers 时

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

【讨论】：