React中Material UI DataGrid缓存报错，求解决方案

错误原因解析 #

1. memo: The first argument must be a component警告
   React.memo的作用是缓存React函数组件，避免组件不必要的重渲染，但你传入的Row和column都是普通数组，不符合参数要求，因此触发警告。

2. Invalid prop rows of type object错误
   因为React.memo接收非组件参数后返回的是异常对象，而非你期望的数组，导致DataGrid的rows属性接收到了错误类型的值，触发类型校验错误。

正确的缓存实现方式 #

要实现DataGrid的缓存，核心是稳定rows和columns的引用，避免组件每次渲染时生成新的数组引用导致DataGrid重渲染。具体做法如下：

场景1：数据为静态常量

如果Mockdata和列配置是静态数据，直接将它们定义在组件外部，这样每次组件渲染时不会重新创建数组引用：

// 定义在组件外部，保持引用稳定
const Mockdata = [{id: 1 , user: "john",School: "LAL" },{id: 2 , user: "Ruby",School: "LAL" }]

const columns = [
  { field: "user", headerName: "Username", width: 250 },
  { field: "School", headerName: "School", width: 250 },
];

const rows = Mockdata.map((data) => ({
    id: data.id,
    user: data.user,
    School: data.School,
}))

function YourComponent() {
  return (
    <DataGrid
      rows={rows}
      columns={columns}
      initialState={{
        pagination: {
          paginationModel: {
            pageSize: 15,
          },
        },
      }}
      pageSizeOptions={[15]}
    />
  );
}

场景2：数据来自Props或组件状态

如果Mockdata是动态数据（比如从Props传入或组件状态），使用useMemo钩子缓存rows和columns的生成结果，仅当依赖项变化时才重新生成数组：

import { useMemo } from 'react';

function YourComponent({ Mockdata }) {
  // 缓存rows，仅当Mockdata变化时重新计算
  const rows = useMemo(() => {
    return Mockdata.map((data) => ({
      id: data.id,
      user: data.user,
      School: data.School,
    }));
  }, [Mockdata]);

  // 缓存列配置，空依赖保证引用始终稳定
  const columns = useMemo(() => [
    { field: "user", headerName: "Username", width: 250 },
    { field: "School", headerName: "School", width: 250 },
  ], []);

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      initialState={{
        pagination: {
          paginationModel: {
            pageSize: 15,
          },
        },
      }}
      pageSizeOptions={[15]}
    />
  );
}

补充说明 #

React.memo并非用来缓存普通数组或对象，如果你需要自定义DataGrid的单元格/行渲染组件，此时可以用React.memo包裹这些自定义组件，避免它们不必要的重渲染。

内容的提问来源于stack exchange，提问作者Inno Namsu