kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Grid open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Grid

1.3.4

v7.7.0

v1.19.1

react-virtualized

handsontable

react-grid-layout

1.3.4

react-table

v7.7.0

bootstrap-table

v1.19.1

Popular Libraries in Grid

Trending New libraries in Grid

Top Authors in Grid

1

14 Libraries

2398

2

12 Libraries

80

3

8 Libraries

18603

4

8 Libraries

4029

5

7 Libraries

26

6

7 Libraries

2171

7

6 Libraries

3481

8

6 Libraries

8477

9

6 Libraries

113

10

5 Libraries

149

1

14 Libraries

2398

2

12 Libraries

80

3

8 Libraries

18603

4

8 Libraries

4029

5

7 Libraries

26

6

7 Libraries

2171

7

6 Libraries

3481

8

6 Libraries

8477

9

6 Libraries

113

10

5 Libraries

149

Trending Kits in Grid

Trending Discussions on Grid

    Material-UI Data Grid onSortModelChange Causing an Infinite Loop
    How to fix position image on another image
    How to automate legends for a new geom in ggplot2?
    How to log production database changes made via the Django shell
    Memoize multi-dimensional recursive solutions in haskell
    Is it possible to combine a ggplot legend and table
    Centre CSS Grid Items Dependent On Dynamic Content Count
    Using cowplot in R to make a ggplot chart occupy two consecutive rows
    Stopping CSS Grid column from overflowing
    logistic regression and GridSearchCV using python sklearn

QUESTION

Material-UI Data Grid onSortModelChange Causing an Infinite Loop

Asked 2022-Feb-14 at 23:31

I'm following the Sort Model documentation (https://material-ui.com/components/data-grid/sorting/#basic-sorting) and am using sortModel and onSortModelChange exactly as used in the documentation. However, I'm getting an infinite loop immediately after loading the page (I can tell this based on the console.log).

What I've tried:

I always end up with the same issue. I'm using Blitz.js.

My code:

useState:

1const [sortModel, setSortModel] = useState<GridSortModel>([
2    {
3      field: "updatedAt",
4      sort: "desc" as GridSortDirection,
5    },
6  ])
7

rows definition:

1const [sortModel, setSortModel] = useState<GridSortModel>([
2    {
3      field: "updatedAt",
4      sort: "desc" as GridSortDirection,
5    },
6  ])
7  const rows = currentUsersApplications.map((application) => {
8    return {
9      id: application.id,
10      business_name: application.business_name,
11      business_phone: application.business_phone,
12      applicant_name: application.applicant_name,
13      applicant_email: application.applicant_email,
14      owner_cell_phone: application.owner_cell_phone,
15      status: application.status,
16      agent_name: application.agent_name,
17      equipment_description: application.equipment_description,
18      createdAt: formattedDate(application.createdAt),
19      updatedAt: formattedDate(application.updatedAt),
20      archived: application.archived,
21    }
22  })
23

columns definition:

1const [sortModel, setSortModel] = useState<GridSortModel>([
2    {
3      field: "updatedAt",
4      sort: "desc" as GridSortDirection,
5    },
6  ])
7  const rows = currentUsersApplications.map((application) => {
8    return {
9      id: application.id,
10      business_name: application.business_name,
11      business_phone: application.business_phone,
12      applicant_name: application.applicant_name,
13      applicant_email: application.applicant_email,
14      owner_cell_phone: application.owner_cell_phone,
15      status: application.status,
16      agent_name: application.agent_name,
17      equipment_description: application.equipment_description,
18      createdAt: formattedDate(application.createdAt),
19      updatedAt: formattedDate(application.updatedAt),
20      archived: application.archived,
21    }
22  })
23
24  const columns = [
25    { field: "id", headerName: "ID", width: 70, hide: true },
26    {
27      field: "business_name",
28      headerName: "Business Name",
29      width: 200,
30      // Need renderCell() here because this is a link and not just a string
31      renderCell: (params: GridCellParams) => {
32        console.log(params)
33        return <BusinessNameLink application={params.row} />
34      },
35    },
36    { field: "business_phone", headerName: "Business Phone", width: 180 },
37    { field: "applicant_name", headerName: "Applicant Name", width: 180 },
38    { field: "applicant_email", headerName: "Applicant Email", width: 180 },
39    { field: "owner_cell_phone", headerName: "Ownership/Guarantor Phone", width: 260 },
40    { field: "status", headerName: "Status", width: 130 },
41    { field: "agent_name", headerName: "Agent", width: 130 },
42    { field: "equipment_description", headerName: "Equipment", width: 200 },
43    { field: "createdAt", headerName: "Submitted At", width: 250 },
44    { field: "updatedAt", headerName: "Last Edited", width: 250 },
45    { field: "archived", headerName: "Archived", width: 180, type: "boolean" },
46  ]
47

Rendering DataGrid and using sortModel/onSortChange

1const [sortModel, setSortModel] = useState<GridSortModel>([
2    {
3      field: "updatedAt",
4      sort: "desc" as GridSortDirection,
5    },
6  ])
7  const rows = currentUsersApplications.map((application) => {
8    return {
9      id: application.id,
10      business_name: application.business_name,
11      business_phone: application.business_phone,
12      applicant_name: application.applicant_name,
13      applicant_email: application.applicant_email,
14      owner_cell_phone: application.owner_cell_phone,
15      status: application.status,
16      agent_name: application.agent_name,
17      equipment_description: application.equipment_description,
18      createdAt: formattedDate(application.createdAt),
19      updatedAt: formattedDate(application.updatedAt),
20      archived: application.archived,
21    }
22  })
23
24  const columns = [
25    { field: "id", headerName: "ID", width: 70, hide: true },
26    {
27      field: "business_name",
28      headerName: "Business Name",
29      width: 200,
30      // Need renderCell() here because this is a link and not just a string
31      renderCell: (params: GridCellParams) => {
32        console.log(params)
33        return <BusinessNameLink application={params.row} />
34      },
35    },
36    { field: "business_phone", headerName: "Business Phone", width: 180 },
37    { field: "applicant_name", headerName: "Applicant Name", width: 180 },
38    { field: "applicant_email", headerName: "Applicant Email", width: 180 },
39    { field: "owner_cell_phone", headerName: "Ownership/Guarantor Phone", width: 260 },
40    { field: "status", headerName: "Status", width: 130 },
41    { field: "agent_name", headerName: "Agent", width: 130 },
42    { field: "equipment_description", headerName: "Equipment", width: 200 },
43    { field: "createdAt", headerName: "Submitted At", width: 250 },
44    { field: "updatedAt", headerName: "Last Edited", width: 250 },
45    { field: "archived", headerName: "Archived", width: 180, type: "boolean" },
46  ]
47      <div style={{ height: 580, width: "100%" }} className={classes.gridRowColor}>
48        <DataGrid
49          getRowClassName={(params) => `MuiDataGrid-row--${params.getValue(params.id, "status")}`}
50          rows={rows}
51          columns={columns}
52          pageSize={10}
53          components={{
54            Toolbar: GridToolbar,
55          }}
56          filterModel={{
57            items: [{ columnField: "archived", operatorValue: "is", value: showArchived }],
58          }}
59          sortModel={sortModel}
60          onSortModelChange={(model) => {
61            console.log(model)
62            //Infinitely logs model immediately
63            setSortModel(model)
64          }}
65        />
66      </div>
67

Thanks in advance!

ANSWER

Answered 2021-Aug-31 at 19:57

I fixed this by wrapping rows and columns in useRefs and used their .current property for both of them. Fixed it immediately.

Source https://stackoverflow.com/questions/69004286