Material-UI Data Grid onSortModelChange导致无限循环

Question

我遵循排序模型文档(https://material-ui.com/components/data-grid/sorting/#basic-sorting)，并使用sortModel和onSortModelChange完全在文档中使用。然而，我在加载页面后立即得到一个无限循环(我可以根据console.log来判断)。

我试过了:

• 在onSortChange prop中使用useCallback
• 使用服务器端排序(https://material-ui.com/components/data-grid/sorting/#server-side-sorting)
• 在onSortChange函数中使用if (sortModel !== model) setSortModel(model)

我总是以同样的问题结束。我用的是Blitz.js。

我代码:

useState:

const [sortModel, setSortModel] = useState<GridSortModel>([
{
field: "updatedAt",
sort: "desc" as GridSortDirection,
},
])

行定义:

const rows = currentUsersApplications.map((application) => {
return {
id: application.id,
business_name: application.business_name,
business_phone: application.business_phone,
applicant_name: application.applicant_name,
applicant_email: application.applicant_email,
owner_cell_phone: application.owner_cell_phone,
status: application.status,
agent_name: application.agent_name,
equipment_description: application.equipment_description,
createdAt: formattedDate(application.createdAt),
updatedAt: formattedDate(application.updatedAt),
archived: application.archived,
}
})

列定义:

const columns = [
{ field: "id", headerName: "ID", width: 70, hide: true },
{
field: "business_name",
headerName: "Business Name",
width: 200,
// Need renderCell() here because this is a link and not just a string
renderCell: (params: GridCellParams) => {
console.log(params)
return <BusinessNameLink application={params.row} />
},
},
{ field: "business_phone", headerName: "Business Phone", width: 180 },
{ field: "applicant_name", headerName: "Applicant Name", width: 180 },
{ field: "applicant_email", headerName: "Applicant Email", width: 180 },
{ field: "owner_cell_phone", headerName: "Ownership/Guarantor Phone", width: 260 },
{ field: "status", headerName: "Status", width: 130 },
{ field: "agent_name", headerName: "Agent", width: 130 },
{ field: "equipment_description", headerName: "Equipment", width: 200 },
{ field: "createdAt", headerName: "Submitted At", width: 250 },
{ field: "updatedAt", headerName: "Last Edited", width: 250 },
{ field: "archived", headerName: "Archived", width: 180, type: "boolean" },
]

渲染数据网格并使用sortModel/onSortChange

<div style={{ height: 580, width: "100%" }} className={classes.gridRowColor}>
<DataGrid
getRowClassName={(params) => `MuiDataGrid-row--${params.getValue(params.id, "status")}`}
rows={rows}
columns={columns}
pageSize={10}
components={{
Toolbar: GridToolbar,
}}
filterModel={{
items: [{ columnField: "archived", operatorValue: "is", value: showArchived }],
}}
sortModel={sortModel}
onSortModelChange={(model) => {
console.log(model)
//Infinitely logs model immediately
setSortModel(model)
}}
/>
</div>

提前感谢!

Answer 1

我不能理解顶部的帖子是什么意思使用useRef，但下面的解决方案是为我工作:

const [sortModel, setSortModel] = useState<GridSortModel>([
{
field: 'created',
sort: 'desc',
},
]);
const handleSortChange = (model: GridSortModel) => {
/* if statement to prevent the infinite loop by confirming model is 
different than the current sortModel state */
if (JSON.stringify(model) !== JSON.stringify(sortModel)) {
setSortModel(model);
}
};
<DataGrid
rows={taskData}
columns={myWorkColumns}
sortModel={sortModel}
onSortModelChange={(model) => handleSortChange(model)}
/>

Answer 2

我通过在useRefs中包装rows和columns并使用它们的.current属性来修复这个问题。立即修复。

Answer 3

最近也遇到了这个问题。以下是我是如何修复它的。

handleSortChange = (model) => {
let dgSort = model[0];
if (JSON.stringify(this.state.dgSort) !== JSON.stringify(dgSort)){
console.log("new sort", dgSort);
this.setState({
dgSort: dgSort
});
}
}

由于某种原因，在设置状态之前添加条件可以防止反复设置状态的无限循环。在我的理解中，无论何时设置状态(或更改状态)，DataGrid都会自动重新呈现自身并再次重新设置状态，因此是无限循环。

Answer 4

我也遇到了同样的问题。我使用useRef捕获排序的变化，然后在代码的另一部分调用它。

const handleSort = (params: GridSortModel) => {
const elem = params
if (params && params.length) {
sortRows.current = { field_order: `${elem[0].field}`, order: `${elem[0].sort}` }
}
}