MUI DataGrid 显示 Airtable 数据答案

【问题标题】：MUI DataGrid display Airtable dataMUI DataGrid 显示 Airtable 数据
【发布时间】：2021-11-30 16:52:28
【问题描述】：

我使用 Airtable 作为基本数据的临时数据库，并使用 Material-UI DataGrid 来显示它。我能够从 Airtable 中检索数据并将其显示在 console.log 中，但无法将其发送到 DataGrid 进行显示。

这是 MUI 数据网格 - https://mui.com/components/data-grid/#mit-version
这是 Airtable npm 包https://www.npmjs.com/package/airtable

This is the console.log displaying the data retrieved.

This is where the error is on the site, it only displays the column header, not the data.

import React, { useEffect, useState } from "react";
import { makeStyles } from "@material-ui/styles";
import { Container, Grid } from "@material-ui/core";
import { DataGrid } from "@mui/x-data-grid";
import Airtable from "airtable";
const base = new Airtable({ apiKey: "*****" }).base(
  "*****"
);

const useStyles = makeStyles(
  (theme) => ({
    container: {
      marginTop: "10vh",
    },
  }),
  {}
);
const col = [
  { field: "id", headerName: "ID", width: 90 },
  { field: "name", headerName: "Institution Name", width: 150 },
  { field: "town", headerName: "Location Town", width: 150 },
  { field: "state", headerName: "State", width: 150 },
];
export default function CE3() {
  const classes = useStyles();
  const [rows, setRows] = useState([]);

  useEffect(() => {
    base("Table 1")
      .select({
        maxRecords: 3,
        view: "Grid view",
      })
      .eachPage((records, fetchNextPage) => {
        setRows(records);
        console.log(records);
        fetchNextPage();
      });
  }, []);

  return (
    <div>
      <Container fixed={true} className={classes.container}>
        Select at least <strong>1</strong> college
        <br></br>
        {rows && (
          <DataGrid
            rows={rows}
            columns={col}
            pageSize={5}
            rowsPerPageOptions={[5]}
            checkboxSelection
            disableSelectionOnClick
          />
        )}
      </Container>
    </div>
  );
}

【问题讨论】：

标签： reactjs datagrid material-ui airtable

【解决方案1】：

您必须为 DataGrid 的父级设置一个高度，以便 DataGrid 可以匹配此高度（请参阅https://mui.com/components/data-grid/layout/#predefined-dimensions）

或者将 autoHeight 属性设置为 true（参见 https://mui.com/components/data-grid/layout/#auto-height）

【讨论】：