道具类型失败：提供给“ForwardRef(DataGrid)”的“object”类型的无效道具“rows”，预期为“array”

Question

美好的一天，我想知道为什么我没有在我的网格表上显示数据，尽管我可以从我的 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>
  )
}

//记录表.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 类型的无效道具行，预期数组。

删除Object.fromEntries后更新

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

我收到这个错误

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

Answer 1

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

Answer 2

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

Answer 3

对我来说，问题是我将列内容放在另一个文件中。 我只是把它放在应用程序组件中，它解决了问题。

如果该列在另一个文件中，它会创建一个 object，尝试将您的记录表组件放在同一组件中（我猜是 userModule）