Material-UI 数据网格 onSortModelChange 导致无限循环

Posted 2023-02-22

【中文标题】Material-UI 数据网格 onSortModelChange 导致无限循环

【英文标题】：Material-UI Data Grid onSortModelChange Causing an Infinite Loop

【发布时间】：2021-10-30 09:31:06

【问题描述】：

我正在关注排序模型文档 (https://material-ui.com/components/data-grid/sorting/#basic-sorting)，并且正在使用文档中使用的 sortModel 和 onSortModelChange。但是，我在加载页面后立即进入无限循环（我可以根据 console.log 判断）。

我尝试过的：

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

我总是遇到同样的问题。我正在使用 Blitz.js。

我的代码：

使用状态：

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" ,
  ]

渲染 DataGrid 并使用 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>

提前致谢！

【参考方案1】：

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

【讨论】：

useMemo 也为我工作

你能给出一些代码示例吗？

【参考方案2】：

最近也遇到过这个问题。这就是我能够修复它的方法。

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 都会自动重新呈现自身并再次重新设置状态，从而导致无限循环。

【参考方案3】：

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

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