道具类型失败：提供给“ForwardRef（DataGrid）”的“object”类型的无效道具“rows”，应为“array”答案

【问题标题】：Failed prop type: Invalid prop `rows` of type `object` supplied to `ForwardRef(DataGrid)`, expected `array`道具类型失败：提供给“ForwardRef（DataGrid）”的“object”类型的无效道具“rows”，应为“array”
【发布时间】：2022-11-11 06:22:34
【问题描述】：

再会！我想知道为什么我没有在我的网格表上显示数据，即使我可以从我的 api 响应中看到或接收到数据，我只是想知道我的代码有什么问题。这是我当前的代码，请在下面查看我的返回数据，谢谢

const UserModule = () => {

  const logHeader = [
    { field: 'id', headerAlign: 'left', headerName: 'ID', hide: true, width: 50 },
    { field: 'firstname', headerAlign: 'left', headerName: 'First Name', width: 130 },
    { field: 'lastname', headerAlign: 'left', headerName: 'Last Name', sortable: true, width: 110 },
    { field: 'status', headerAlign: 'left', headerName: 'Status', width: 80 },

  ]


  const [transactionLogData, setTransactionLogData] = useState([]);

  useEffect(() => {

    WorkflowApi.getTransactionLogForRevenueOfficer().then(logs => {

        const newLogs = Object.fromEntries(Object.entries(logs).map( ([k,v]) =>  {
              return [k, {
                ...v,
                id: v._id
              }] // I think the problem is here
        }))  
        console.log("newLogs: ", newLogs)
        setTransactionLogData(newLogs)
    })

  })
  ....
return (
  <Grid item xs={12}>
        <Box ref={componentRef}>
             <RecordTable
                  columns={logHeader}
                  rows={transactionLogData}>
             </RecordTable>
         </Box>
  </Grid>
  )
}

//RecordTable.js

const RecordTable = (props) => {

    const { columns, rows } = props

    useEffect(async () => {

    }, [rows])

//This type of array did my RecordTable component expects

// const sampleRows = [
//     {
//       "_id": 458,
//       "LastUpdateDate": "2022-02-10",
//       "status": "Approved",
//       "firstname": "Yuno",
//       "lastname": "Santiago",
//       "id": 458
//     }
// ]
    return(
            <DataGrid
                ....
                columns={columns}
                rows={rows}
                ....
            />
    )
}

我从我的 api 收到的回复

{
    "_id": 458,
    "LastUpdateDate": "2022-02-10",
    "status": "Approved",
    "firstname": "Yuno",
    "lastname": "Santiago",
    "id": 458
}

这是我得到的错误

警告：失败的道具类型：提供给 ForwardRef（DataGrid）的类型对象的无效道具行，预期的数组。`

删除后更新Object.fromEntries

const newLogs = Object.entries(logs).map( ([k,v]) =>  {
                  return [k, {
                    ...v,
                    id: v._id
                  }] // I think the problem is here
            })

我收到了这个错误

未捕获的错误：MUI：数据网格组件要求所有行都具有唯一的 id 属性。

【问题讨论】：

API 发送的对象不是数组，因为数组必须在 [ ] 之间
你能帮我解决这个问题吗？ @PauloFernando

标签： javascript node.js reactjs

【解决方案1】：

我相信问题出在 Object.fromEntries 中，这个方法的结果始终是一个对象，而不是一个数组。尝试删除 Object.fromEntries，只留下 Object.entries

【讨论】：

在我删除 Object.fromEntries 后，我收到了这个错误 Uncaught Error: MUI: The data grid component requires all rows to have a unique id` 属性。
嗯，确实， Object.entries() 将对象分解为键/值对数组。它行不通。尝试仅使用 ...logs.map...
并把console.log("newLogs: ", newLogs)的结果

【解决方案2】：

检查您的 rows 道具，很有可能在第一次渲染时是空对象。为此，您只需 console.log({rows}) 并在浏览器中查看打印的值

【讨论】：