MUI DataGrid数据不显示、rows类型错误、缺唯一id排查

两个报错都是数据处理逻辑错误，传给DataGrid的rows属性不符合格式要求导致：

• 第一个类型报错：MUI DataGrid的rows属性仅接收元素为行对象的一维数组，第一次处理时用Object.fromEntries把接口返回值转换成了普通键值对对象，类型和要求的数组不匹配，触发类型校验警告。
• 第二个id缺失报错：移除Object.fromEntries后，Object.entries(logs).map()返回的是二维数组（每个元素是[属性名, 属性值]格式的小数组），不是一维的行对象数组，DataGrid遍历行时拿到的元素是数组，自然识别不到要求的唯一id字段，直接抛出运行时错误。
• 额外隐藏问题：当前useEffect没有传入第二个依赖数组参数，会导致组件每次重渲染都重复调用接口，触发无限请求死循环。

删掉多余的Object.entries/Object.fromEntries转换逻辑，直接把接口返回值处理成符合要求的一维对象数组即可，修正后的代码如下：

useEffect(() => {
  WorkflowApi.getTransactionLogForRevenueOfficer().then(logs => {
    // 兼容接口返回单条对象/对象数组两种场景
    const rawLogList = Array.isArray(logs) ? logs : [logs]
    // 遍历列表给每条数据映射id字段，直接生成一维对象数组
    const formattedLogs = rawLogList.map(logItem => ({
      ...logItem,
      id: logItem._id
    }))
    setTransactionLogData(formattedLogs)
  })
// 传入空依赖数组，仅在组件首次挂载时调用一次接口
}, [])

处理完成后transactionLogData的结构会和你注释里的sampleRows格式完全一致，DataGrid可以正常渲染数据，不会再触发两类报错。

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