如何在useRef中包装MUI数据网格行和列(修复onSortModelChange中的无限循环)

Question

我遇到了与下面问题相同的问题。一条注释，称使用useRef换行和换行，并使用其当前值。我该怎么做？？

SortModelChange上的Material UI数据网格导致无限循环

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)}
/>