admin管理员组文章数量:1406308
Good day! I was wondering why I didnt display data on my grid table eventhough I can see or received data from my api response, I just wondering whats wrong on my code. here is my current code and please see my return data below, thanks
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={ponentRef}>
<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 ponent expects
// const sampleRows = [
// {
// "_id": 458,
// "LastUpdateDate": "2022-02-10",
// "status": "Approved",
// "firstname": "Yuno",
// "lastname": "Santiago",
// "id": 458
// }
// ]
return(
<DataGrid
....
columns={columns}
rows={rows}
....
/>
)
}
response i received from my api
{
"_id": 458,
"LastUpdateDate": "2022-02-10",
"status": "Approved",
"firstname": "Yuno",
"lastname": "Santiago",
"id": 458
}
this is the error i get
Warning: Failed prop type: Invalid prop rows of type object supplied to ForwardRef(DataGrid), expected array.`
Update after i remove the Object.fromEntries
const newLogs = Object.entries(logs).map( ([k,v]) => {
return [k, {
...v,
id: v._id
}] // I think the problem is here
})
i received this error
Uncaught Error: MUI: The data grid ponent requires all rows to have a unique id property.
Good day! I was wondering why I didnt display data on my grid table eventhough I can see or received data from my api response, I just wondering whats wrong on my code. here is my current code and please see my return data below, thanks
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={ponentRef}>
<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 ponent expects
// const sampleRows = [
// {
// "_id": 458,
// "LastUpdateDate": "2022-02-10",
// "status": "Approved",
// "firstname": "Yuno",
// "lastname": "Santiago",
// "id": 458
// }
// ]
return(
<DataGrid
....
columns={columns}
rows={rows}
....
/>
)
}
response i received from my api
{
"_id": 458,
"LastUpdateDate": "2022-02-10",
"status": "Approved",
"firstname": "Yuno",
"lastname": "Santiago",
"id": 458
}
this is the error i get
Warning: Failed prop type: Invalid prop rows of type object supplied to ForwardRef(DataGrid), expected array.`
Update after i remove the Object.fromEntries
const newLogs = Object.entries(logs).map( ([k,v]) => {
return [k, {
...v,
id: v._id
}] // I think the problem is here
})
i received this error
Uncaught Error: MUI: The data grid ponent requires all rows to have a unique id property.
- The API is sending an object not an array, as array must be between [ ] – Paulo Fernando Commented Jul 7, 2022 at 0:16
- can you please help me with this? @PauloFernando – Yuno Commented Jul 7, 2022 at 0:18
4 Answers
Reset to default 1DataGrid from MUI requires rows to be an array of objects, each with a unique id field.
Make sure your API response is indeed an array. If not, and it's just a single object, wrap it in an array like so:
const newLogs = [{ ...logs, id: logs._id}]
check your rows props, it highly possible is empty object at first render.
To do so, you just console.log({rows}) and see the value printed in browser
I believe the problem is in the Object.fromEntries, the result of this method is always an object, not an array. Try to remove the Object.fromEntries, and leave only the Object.entries
For me, the problem is that I put the column content in another file. I just put it in the app ponent and it solves the problem.
It creates an object if the column is in another file, try to put your recordtable ponent in the same ponent(userModule I guess)
本文标签：
版权声明：本文标题：javascript - Failed prop type: Invalid prop `rows` of type `object` supplied to `ForwardRef(DataGrid)`, expected `array` - Stack 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745005547a2637239.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论