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

col17t5w 于 2023-10-18 发布在其他

关注(0)|答案(5)|浏览(111)

我遵循排序模型文档（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
我的代码：
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" },
  ]

渲染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>

提前感谢！

next.js

来源：https://stackoverflow.com/questions/69004286/material-ui-data-grid-onsortmodelchange-causing-an-infinite-loop

5条答案

按热度按时间

p8ekf7hl1#

无法理解上面的帖子使用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)}
    />

赞(0）回复(0）举报 2023-10-18

8i9zcol22#

我通过将rows和columns Package 在useRefs中并为它们使用它们的.current属性来修复这个问题。立刻修好了。

赞(0）回复(0）举报 2023-10-18

yrwegjxp3#

最近也遇到了这个问题。我是这样修复的

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会自动重新呈现自己，并再次重新设置状态，因此出现了无限循环。

赞(0）回复(0）举报 2023-10-18

cs7cruho4#

我也有同样的问题。我使用useRef来捕获排序的变化，并在代码的另一部分调用它。

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

赞(0）回复(0）举报 2023-10-18

wdebmtf25#

Below is the function stops onStateChange to call continuously for DataGrid .
Can have function on comparing filterCount or sortModel : 

    onStateChange={(e) => {
                      if (JSON.stringify(this.state.filteredCountFAGrid) !== JSON.stringify(e.pagination.rowCount)){
                        console.log("new sort", e.pagination.rowCount);
                        this.setState({
                          filteredCountFAGrid: e.pagination.rowCount
                        });
                      }
                    }}

赞(0）回复(0）举报 2023-10-18

我来回答

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

5条答案

相关问题

热门标签

最新问答