MUI DataGrid已加载数据但无法渲染，请求技术排查

我复制MUI官网的DataGrid示例代码可正常运行：

import * as React from 'react';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 38,
    desk: 'D-546',
  },
  {
    id: 2,
    username: '@MUI-X',
    age: 25,
    desk: 'D-042',
  },
];

export default function GridSample() {
  return (
    <div style={{ height: 200, width: '100%' }}>
      <DataGrid
        columns={[
          { field: 'username', hideable: false },
          { field: 'age' },
          { field: 'desk' },
        ]}
        rows={rows}
        slots={{
          toolbar: GridToolbar,
        }}
      />
    </div>
  );
}

但当我改用API获取数据时，DataGrid的行数统计正确，但数据内容无法渲染。尝试设置自动高度属性或容器高度后问题仍未解决，而使用@mui/material/Table组件加载同一API的数据则可正常渲染。以下是我的实现代码：

import * as React from 'react';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import { useState, useEffect } from "react";
import axios from "axios";

export default function VisibleColumnsBasicExample() {
  const [products, setProducts] = useState([])
  const endpoint = 'http://localhost:3500/catalog'

  const getData = async () => {
    await axios.get(endpoint).then((response) => {
      const data = response.data
      setProducts(data)
      console.log(data)
    })
  }

  useEffect(() => {
    getData()
  }, [])

  const rows = products

  return (
    <div style={{ height: 200, width: '100%' }}>
      <DataGrid
        columns={[
          { field: 'Model Code', hideable: false },
          { field: 'Model Description' },
          { field: 'Price' },
          { field: 'Status' },
          { field: 'Start Date' },
          { field: 'End Date' },
        ]}
        rows={rows}
        slots={{
          toolbar: GridToolbar,
        }}
        getRowId={(row) => row.modelCode}
      />
    </div>
  );
}

问题原因 #

核心问题是DataGrid列配置的field属性与API返回数据的字段名不匹配：

• 你在columns里定义的field是带空格的友好名称（比如'Model Code'），但API返回的数据字段是驼峰式的（比如modelCode，从getRowId={(row) => row.modelCode}可以确认）
• DataGrid会通过field值去行数据中查找对应属性，找不到就无法渲染内容；而行数统计正确是因为rows的数组长度是对的

解决方案 #

修改columns配置，将field设置为与API返回数据一致的字段名，同时用headerName定义表头显示的友好名称：

修正后的columns示例：

columns={[
  { field: 'modelCode', headerName: 'Model Code', hideable: false },
  { field: 'modelDescription', headerName: 'Model Description' },
  { field: 'price', headerName: 'Price' },
  { field: 'status', headerName: 'Status' },
  { field: 'startDate', headerName: 'Start Date' },
  { field: 'endDate', headerName: 'End Date' },
]}

完整修正代码 #

import * as React from 'react';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import { useState, useEffect } from "react";
import axios from "axios";

export default function VisibleColumnsBasicExample() {
  const [products, setProducts] = useState([])
  const endpoint = 'http://localhost:3500/catalog'

  const getData = async () => {
    await axios.get(endpoint).then((response) => {
      const data = response.data
      setProducts(data)
      console.log(data)
    })
  }

  useEffect(() => {
    getData()
  }, [])

  const rows = products

  return (
    <div style={{ height: 200, width: '100%' }}>
      <DataGrid
        columns={[
          { field: 'modelCode', headerName: 'Model Code', hideable: false },
          { field: 'modelDescription', headerName: 'Model Description' },
          { field: 'price', headerName: 'Price' },
          { field: 'status', headerName: 'Status' },
          { field: 'startDate', headerName: 'Start Date' },
          { field: 'endDate', headerName: 'End Date' },
        ]}
        rows={rows}
        slots={{
          toolbar: GridToolbar,
        }}
        getRowId={(row) => row.modelCode}
      />
    </div>
  );
}

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