MUI DataGrid仅显示1条结果不展示全部数据的问题排查及最佳实践咨询

问题根因 #

你当前的rows构造逻辑存在错误：你把所有过滤后的inCourse数组的字段分别提取为数组，塞进了单个行对象中，导致rows数组永远只有1个元素，自然只能显示1条数据。

修复代码 #

仅需调整rows的生成逻辑即可，直接遍历inCourse数组，将每一条业务数据转换为符合DataGrid要求的行对象：

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

// 建议提前定义业务数据类型，避免使用any
interface ProcessItem {
  id: number;
  isActive: number;
  houseType: string;
  processNumber: string;
}

interface Props {
  processes: ProcessItem[];
}

const DataTable: FC<Props> = ({ processes }) => {
  // 增加空值兜底，避免processes为undefined时报错
  const inCourse = processes?.filter(process => process.isActive === 0) || [];
  const columns: GridColDef[] = [
    { field: "id", headerName: "Id", hide: true },
    { field: "NProc", headerName: "N/Proc" },
    { field: "VRef", headerName: "V/Proc" },
  ];
  // 正确的rows生成逻辑：每条业务数据对应一行
  const rows: GridRowsProp = inCourse.map(process => ({
    id: process.id,
    VRef: process.houseType,
    NProc: process.processNumber
  }));

  return (
    <div className="gridboard" style={{ height: 400, width: '100%' }}>
      {/* DataGrid需要指定父容器高度，否则会出现渲染异常 */}
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
};

export default DataTable;

MUI DataGrid开发最佳实践 #

• 类型约束：不要用any声明业务数据类型，提前定义好后端返回的字段接口，避免字段名拼写错误、类型不匹配的隐性问题
• 空值兼容：所有外部传入的列表数据都要做空值兜底，避免渲染阶段出现不可预期的报错
• 容器尺寸：DataGrid依赖父容器的宽高做渲染计算，必须给包裹DataGrid的容器设置明确的宽高，否则会出现滚动异常、内容不显示等问题
• 行唯一标识：必须保证每一行的id字段全局唯一，这是DataGrid内部做行状态管理、虚拟滚动渲染的核心依赖，重复id会导致选中、排序、分页等功能异常
• 大数据优化：如果单页数据量超过100条，建议开启服务端分页/过滤/排序，避免前端渲染大量DOM导致页面卡顿

内容的提问来源于stack exchange，提问作者Marco Ávila