从API获取数据渲染至DataGrid时遇到类型错误问题

API返回数据结构 #

{
  "data": [
    {
      "type": "PropertyDamage",
      "id": "100",
      "attributes": {
        "identification_number": "3931",
        "damage_date": "2021-04-29",
        "report_date": "2021-06-26"
      }
    },
    {
      "type": "PropertyDamage",
      "id": "101",
      "attributes": {
        "identification_number": "3839",
        "damage_date": "2021-01-21",
        "report_date": "2021-08-25"
      }
    },
    {
      "type": "PropertyDamage",
      "id": "102",
      "attributes": {
        "identification_number": "3735",
        "damage_date": "2021-04-25",
        "report_date": "2021-10-29"
      }
    }
  ]
}

React组件代码 #

const columns = [
  { field: "id", headerName: "ID" },
  { field: "type", headerName: "TYPE" },
];

const Dashboard = () => {

  const [propertydamages, setPropertyDamages] = useState([]);

  useEffect(() => {
    const url = "URL";
    fetch(url, {
      method: "GET",
      withCredentials: true,
      headers: {
        "X-API-Key": "API Key",
      },
    })
      .then((response) => response.json())
      .then((json) => {
        setPropertyDamages(json);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  return (
    <Box m="20px">
      {/* Data Grid */}
      <DataGrid rows={propertydamages} columns={columns} />
    </Box>
  );
};

控制台错误信息 #

index.js:1272 Warning: Failed prop type: Invalid prop `rows` of type `object` supplied to `ForwardRef(DataGrid)`, expected an array.
        at div
        at http://localhost:3000/static/js/0.chunk.js:942:73
        at Box (http://localhost:3000/static/js/0.chunk.js:69597:74)
        at div
        at http://localhost:3000/static/js/0.chunk.js:942:73
        at Box (http://localhost:3000/static/js/0.chunk.js:69597:74)
        at Dashboard (http://localhost:3000/static/js/main.chunk.js:373:77)
        at RenderedRoute (http://localhost:3000/static/js/0.chunk.js:153998:27)
        at Routes (http://localhost:3000/static/js/0.chunk.js:154437:24)
        at main
        at div
        at InnerThemeProvider (http://localhost:3000/static/js/0.chunk.js:68080:72)
        at ThemeProvider (http://localhost:3000/static/js/0.chunk.js:67042:24)
        at ThemeProvider (http://localhost:3000/static/js/0.chunk.js:68098:24)
        at App (http://localhost:3000/static/js/main.chunk.js:51:72)
        at Router (http://localhost:3000/static/js/0.chunk.js:154367:30)
        at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:152656:23)

解决方案 #

错误原因 #

你将API返回的整个外层对象赋值给了propertydamages，但DataGrid的rows属性要求传入数组类型数据，而API返回的目标数组实际在json.data字段中。

修改步骤 #

1. 提取正确的数组数据：在fetch的回调中，提取json.data作为数据源；如果需要展示attributes内的字段，可将其展开到顶层对象，避免嵌套访问。
2. 调整列配置（可选）：如果要展示更多字段，扩展columns数组对应字段。

修改后的代码片段：

// 扩展列配置，可选
const columns = [
  { field: "id", headerName: "ID" },
  { field: "type", headerName: "TYPE" },
  { field: "identification_number", headerName: "编号", width: 150 },
  { field: "damage_date", headerName: "损坏日期", width: 150 },
  { field: "report_date", headerName: "上报日期", width: 150 }
];

const Dashboard = () => {
  const [propertydamages, setPropertyDamages] = useState([]);

  useEffect(() => {
    const url = "URL";
    fetch(url, {
      method: "GET",
      withCredentials: true,
      headers: {
        "X-API-Key": "API Key",
      },
    })
      .then((response) => response.json())
      .then((json) => {
        // 提取data数组，并展开attributes字段到顶层
        const formattedRows = json.data.map(item => ({
          ...item,
          ...item.attributes
        }));
        setPropertyDamages(formattedRows);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  return (
    <Box m="20px">
      <DataGrid rows={propertydamages} columns={columns} />
    </Box>
  );
};

这样处理后，propertydamages会变成符合要求的数组，每个元素包含id、type以及attributes内的所有字段，DataGrid即可正常渲染。

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