API返回数据无法在DataGrid表格中显示的问题排查

调用API获取数据后，尝试用MUI的DataGrid组件展示数据失败，出现如下错误：

react-dom.development.js:67 Warning: Failed prop type: Invalid prop rows of type object supplied to ForwardRef(DataGrid), expected array

表格列配置来自hostdatatablesource，行数据通过当前页面的API请求获取，相关代码如下：

import "./datatable.scss";
import { DataGrid } from "@mui/x-data-grid";
import { userColumns } from "../../hostdatatablesource";
import { Link } from "react-router-dom";
import { useState,useEffect } from "react";
import useAxiosPrivate from "../../hooks/useAxiosPrivate";

const HOST_URL = '/organizers';

const Datatable = () => {
  const [data, setData] = useState([]);
  const axiosPrivate = useAxiosPrivate();
  
      useEffect(() => {
          let isMounted = true;
          const controller = new AbortController();
          const fetchData = async () => {
              try {
         const response = await axiosPrivate.get(HOST_URL,
            {
            signal: controller.signal
            });
            isMounted && setData(response.data);
                  } 
      catch (err) {
        if (err.response) {
          // Not in the 200 response range 
          console.log(err.response.data);
          console.log(err.response.status);
          console.log(err.response.headers);
        } else {
          console.log(`Error: ${err.message}`);
        }
      }
    }
    fetchData();

    return () =>{
          isMounted = false;
          controller.abort();
    }
  }, [])

  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };
  const actionColumn = [
    {
      field: "action",
      headerName: "Action",
      width: 200,
      renderCell: (params) => {
        return (
          <div className="cellAction">
            <Link to="/host/Hostsingle" style={{ textDecoration: "none" }}>
              <div className="viewButton">View</div>
            </Link>
            <div
              className="deleteButton"
              onClick={() => handleDelete(params.row.id)}
            >
              Delete
            </div>
          </div>
        );
      },
    },
  ];
  return (
    <div className="datatable">
      <div className="datatableTitle">
        Add New Host
        <Link to="/host/new" className="link">
          Add Host
        </Link>
      </div>
      <DataGrid
        className="datagrid"
        rows={data}
        columns={userColumns.concat(actionColumn)}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
      />
    </div>
  );
};

export default Datatable;

报错核心原因：DataGrid的rows属性要求必须是数组类型，但你从API获取的response.data是对象，不符合组件的参数要求。

解决步骤：

1. 确认API返回的数据结构：

   • 如果API返回的是包裹数组的对象（常见格式如{ list: [...] }或{ data: [...] }），需要提取其中的数组字段赋值给data，比如：

     isMounted && setData(response.data.list); // 替换为实际的数组字段名
     

   • 如果API本应返回数组，检查请求地址、后端接口是否正确，确保返回格式为数组。

2. 兜底处理（可选）：为了避免API返回非数组导致的报错，可以在设置数据时做类型校验：

   isMounted && setData(Array.isArray(response.data) ? response.data : []);
   

这样修改后，DataGrid就能接收到符合要求的数组类型rows数据，报错即可解决。

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