SetPage не меняет страницу в сетке данных Mui

SetPage отлично работает в компоненте нумерации страниц. Однако это не меняет страницу в самой сетке данных. Я вижу количество изменений (страницы) в консоли браузера.

Если номер страницы введен статически в useState, страница отображается правильно.

Вот мой код:

компонент datagrid:

import { FC } from "react";
import { Paper, Stack, Typography } from "@mui/material";
import { DataGrid, GridToolbar, GridColDef } from "@mui/x-data-grid";


const CustomDataGrid: FC<{
    tableTitle: string;
    rowsData: any;
    columnsData: GridColDef[];
    currentPage: number;
    pageSize: number;
    getRowId?: (params: any) => any;
    error?: any;
    NoDataMsg: string;
    NoResultMsg: string;
}> = ({
    tableTitle,
    rowsData,
    columnsData,
    currentPage,
    pageSize,
    getRowId,
    error,
    NoDataMsg,
    NoResultMsg
}) => {
    return (
        <Paper elevation = {4} style = {{ marginBottom: "10px", borderRadius: "10px" }}>
            <Typography
                textAlign = "center"
                variant = "h5"
                style = {{ paddingTop: "20px", paddingBottom: "40px", fontWeight: "bold" }}
            >
                {tableTitle}
            </Typography>
            <DataGrid
                columns = {columnsData}
                rows = {rowsData}
                rowHeight = {64}
                initialState = {{
                    pagination: { paginationModel: { pageSize: pageSize, page: currentPage - 1 } }
                }}
                ignoreDiacritics
                hideFooterPagination
                disableRowSelectionOnClick
                disableColumnFilter
                disableColumnMenu
                disableColumnSelector
                disableDensitySelector
                hideFooterSelectedRowCount
                getRowId = {getRowId}
                autoHeight = {true}
                slotProps = {{ toolbar: { showQuickFilter: true } }}
                slots = {{
                    toolbar: GridToolbar,
                    noRowsOverlay: () => (
                        <Stack height = "100%" alignItems = "center" justifyContent = "center">
                            <Typography
                                variant = "h4"
                                sx = {{ fontSize: "24px", color: error ? "error.main" : "primary.main" }}
                            >
                                { NoDataMsg }
                            </Typography>
                        </Stack>
                    ),
                    noResultsOverlay: () => (
                        <Stack height = "100%" alignItems = "center" justifyContent = "center">
                            <Typography variant = "h4" sx = {{ fontSize: "24px", color: "primary.main" }}>
                                { NoResultMsg }
                            </Typography>
                        </Stack>
                    )
                }}
            />
        </Paper>
    );
};

export default CustomDataGrid;

компонент нумерации страниц:

import { FC } from "react";
import { Pagination } from "@mui/material";


const CustomPagination: FC<{
    page: number;
    setPage: (params: any) => any;
    totalRows: number;
    pageSize: number;
}> = ({
    page,
    setPage,
    pageSize,
    totalRows
}) => {
    return (
        <Pagination
            count = {Math.ceil(totalRows / pageSize)}
            variant = "outlined"
            shape = "rounded"
            page = {page}
            hideNextButton
            hidePrevButton
            size = "small"
            sx = {{ width: "100%" }}
            onChange = {(e) => {
                const target = e.target as HTMLElement;
                setPage(Number(target.innerText));
            }}
        />
    );
};

export default CustomPagination;

Приложение.tsx:

import { useState } from 'react'
import { GridColDef } from "@mui/x-data-grid";
import { clinicsData } from "../data";
import CustomDataGrid from './comps/datagridComp';
import CustomPagination from './comps/paginationComp';

function App() {

  const pageSize = 7;
    const [page, setPage] = useState(1);
  const columns: GridColDef[] = [
        {
            field: "name",
            headerName: "Name",
            flex: 1,
            headerAlign: "center",
            sortable: false
        }
    ];

  

  console.info(page)

  return (
    <>
      <CustomDataGrid
        tableTitle='Clinics Table'
        getRowId = {(row) => row.id}
        columnsData = {columns}
        rowsData = {clinicsData}
        currentPage = {page}
        pageSize = {pageSize}
        // error = {error}
        NoDataMsg = {"No Data Available"}
        NoResultMsg = {"No Data Matching"}
      />
      {clinicsData.length / pageSize > 1 && (
        <CustomPagination
          page = {page}
          setPage = {setPage}
          pageSize = {pageSize}
          totalRows = {clinicsData.length}
        />
      )}
    </>
  )
}

export default App

🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.


67
2

Ответы:

Решено

В разбиении на страницы сетки данных MUI упоминается использование apiRef.

Затем эта ссылка предоставит правильный обратный вызов setPage через useImperativeHandle, для которого требуется эта ссылка.

Итак, вместо того, чтобы звонить

<Button onClick = {() => setPage(1)}>Click me</Button>

вместо этого ты бы сделал

<Button onClick = {() => apiRef.current.setPage(1)}>Click me</Button>

Кроме того, вам нужно передать правильный реквизит, а не размещать его случайным образом за пределами компонента, как здесь.

slots = {{
  pagination: YourCustomPaginationComponent
}}