reactjs - DataGrid 仅返回 1 个结果而不是更多

Question

我正在尝试从 MUI 显示此数据表上的所有结果，但它只显示 1 个结果而不是全部，我看不出我做错了什么。

如果您对如何制作桌子有好的想法和最佳实践，我将不胜感激。

import React, { FC } from "react";
import { DataGrid, GridColDef, GridRowsProp } from "@mui/x-data-grid";

interface Props {
  processes: any;
}

const DataTable: FC<Props> = ({ processes }) => {
  const inCourse = processes.filter(function (process: any) {
    return process.isActive === 0;
  });
  const columns: GridColDef[] = [
    { field: "id", headerName: "Id", hide: true },
    { field: "NProc", headerName: "N/Proc" },
    { field: "VRef", headerName: "V/Proc" },
  ];
  const rows: GridRowsProp = [
    {
      id: inCourse.map((process: any) => {
        return process.id;
      }),
      VRef: inCourse.map((process: any) => {
        return process.houseType;
      }),
      NProc: inCourse.map((process: any) => {
        return process.processNumber;
      }),
    },
  ];

  return (
    <div className="gridboard">
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
};

export default DataTable;

标签： reactjstypescriptmaterial-ui

Answer 1

该rows数组仅包含一个值，因此DataGrid显示一行，您可能想要这样的东西。Array.map()更多细节见：

const rows: GridRowsProp = inCourse.map(c => ({
  id: c.id,
  VRef: c.houseType,
  NProc: c.processNumber,
}));