After delete the last existing data of the table in second page then the program have crashed

[gokhansamet]

I use the tableRef to refresh remote data after delete/edit and add operations. It is working but then I have realized there is a problem when I delete the last existing data.

The error messages

Error Message

Warning: Failed prop type: Material-UI: The page prop of a TablePagination is out of range (0 to 1, but page is 2).
    in ForwardRef(TablePagination) (created by WithStyles(ForwardRef(TablePagination)))
    in WithStyles(ForwardRef(TablePagination)) (created by MaterialTable)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MaterialTable)
    in tfoot (created by ForwardRef(TableFooter))
    in ForwardRef(TableFooter) (created by WithStyles(ForwardRef(TableFooter)))
    in WithStyles(ForwardRef(TableFooter)) (created by MaterialTable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at ParticipantTable.jsx:108)
    in ParticipantTable (at Participant.jsx:65)
    in div (created by TabPane)
    in TabPane (at TabPanel.jsx:89)
    in div (created by TabPanelList)
    in div (created by TabPanelList)
    in TabPanelList (created by ForwardRef(Tabs))
    in div (created by ForwardRef(Tabs))
    in ForwardRef(Tabs) (created by Context.Consumer)
    in Tabs (at TabPanel.jsx:79)
    in TabPanel (at Participant.jsx:72)
    in Participants (at Layout.jsx:144)
    in main (at Layout.jsx:143)
    in div (at Layout.jsx:59)
    in Layout (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:41)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:40)
    in Provider (at src/index.js:39)
console.<computed> @ TooltipPopoverWrapper.js:212
InputGroup.js:1 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (:3000/static/js/0.chunk.js:310609)
    at scheduleUpdateOnFiber (:3000/static/js/0.chunk.js:308681)
    at dispatchAction (:3000/static/js/0.chunk.js:303296)
    at :3000/static/js/0.chunk.js:77977
    at commitHookEffectListMount (:3000/static/js/0.chunk.js:307270)
    at commitPassiveHookEffects (:3000/static/js/0.chunk.js:307307)
    at HTMLUnknownElement.callCallback (:3000/static/js/0.chunk.js:287852)
    at HTMLUnknownElement.dispatchEvent (<anonymous>)
    at Object.invokeGuardedCallbackDev (:3000/static/js/0.chunk.js:287901)
    at invokeGuardedCallback (:3000/static/js/0.chunk.js:287954)
    at flushPassiveEffectsImpl (:3000/static/js/0.chunk.js:310371)
    at unstable_runWithPriority (:3000/static/js/0.chunk.js:338296)
    at runWithPriority$1 (:3000/static/js/0.chunk.js:298739)
    at flushPassiveEffects (:3000/static/js/0.chunk.js:310339)
    at performSyncWorkOnRoot (:3000/static/js/0.chunk.js:309254)
    at :3000/static/js/0.chunk.js:298793
    at unstable_runWithPriority (:3000/static/js/0.chunk.js:338296)
    at runWithPriority$1 (:3000/static/js/0.chunk.js:298739)
    at flushSyncCallbackQueueImpl (:3000/static/js/0.chunk.js:298788)
    at flushSyncCallbackQueue (:3000/static/js/0.chunk.js:298776)
    at scheduleUpdateOnFiber (:3000/static/js/0.chunk.js:308716)
    at Object.enqueueSetState (:3000/static/js/0.chunk.js:300338)
    at MaterialTable.push../node_modules/react/cjs/react.development.js.Component.setState (:3000/static/js/0.chunk.js:322702)
    at :3000/static/js/0.chunk.js:214962
TooltipPopoverWrapper.js:212 The above error occurred in the <ForwardRef(ButtonBase)> component:
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
    in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
    in WithStyles(ForwardRef(IconButton)) (created by MTablePaginationInner)
    in span (created by ForwardRef(Tooltip))
    in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
    in WithStyles(ForwardRef(Tooltip)) (created by MTablePaginationInner)
    in div (created by MTablePaginationInner)
    in MTablePaginationInner (created by WithStyles(MTablePaginationInner))
    in WithStyles(MTablePaginationInner) (created by ActionsComponent)
    in ActionsComponent (created by ForwardRef(TablePagination))
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by ForwardRef(TablePagination))
    in td (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by ForwardRef(TablePagination))
    in ForwardRef(TablePagination) (created by WithStyles(ForwardRef(TablePagination)))
    in WithStyles(ForwardRef(TablePagination)) (created by MaterialTable)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MaterialTable)
    in tfoot (created by ForwardRef(TableFooter))
    in ForwardRef(TableFooter) (created by WithStyles(ForwardRef(TableFooter)))
    in WithStyles(ForwardRef(TableFooter)) (created by MaterialTable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at ParticipantTable.jsx:108)
    in ParticipantTable (at Participant.jsx:65)
    in div (created by TabPane)
    in TabPane (at TabPanel.jsx:89)
    in div (created by TabPanelList)
    in div (created by TabPanelList)
    in TabPanelList (created by ForwardRef(Tabs))
    in div (created by ForwardRef(Tabs))
    in ForwardRef(Tabs) (created by Context.Consumer)
    in Tabs (at TabPanel.jsx:79)
    in TabPanel (at Participant.jsx:72)
    in Participants (at Layout.jsx:144)
    in main (at Layout.jsx:143)
    in div (at Layout.jsx:59)
    in Layout (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:41)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:40)
    in Provider (at src/index.js:39)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
console.<computed> @ TooltipPopoverWrapper.js:212
react-dom.development.js:5494 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (:3000/static/js/0.chunk.js:310609)
    at scheduleUpdateOnFiber (:3000/static/js/0.chunk.js:308681)
    at dispatchAction (:3000/static/js/0.chunk.js:303296)
    at :3000/static/js/0.chunk.js:77977
    at commitHookEffectListMount (:3000/static/js/0.chunk.js:307270)
    at commitPassiveHookEffects (:3000/static/js/0.chunk.js:307307)
    at HTMLUnknownElement.callCallback (:3000/static/js/0.chunk.js:287852)
    at HTMLUnknownElement.dispatchEvent (<anonymous>)
    at Object.invokeGuardedCallbackDev (:3000/static/js/0.chunk.js:287901)
    at invokeGuardedCallback (:3000/static/js/0.chunk.js:287954)
    at flushPassiveEffectsImpl (:3000/static/js/0.chunk.js:310371)
    at unstable_runWithPriority (:3000/static/js/0.chunk.js:338296)
    at runWithPriority$1 (:3000/static/js/0.chunk.js:298739)
    at flushPassiveEffects (:3000/static/js/0.chunk.js:310339)
    at performSyncWorkOnRoot (:3000/static/js/0.chunk.js:309254)
    at :3000/static/js/0.chunk.js:298793
    at unstable_runWithPriority (:3000/static/js/0.chunk.js:338296)
    at runWithPriority$1 (:3000/static/js/0.chunk.js:298739)
    at flushSyncCallbackQueueImpl (:3000/static/js/0.chunk.js:298788)
    at flushSyncCallbackQueue (:3000/static/js/0.chunk.js:298776)
    at scheduleUpdateOnFiber (:3000/static/js/0.chunk.js:308716)
    at Object.enqueueSetState (:3000/static/js/0.chunk.js:300338)
    at MaterialTable.push../node_modules/react/cjs/react.development.js.Component.setState (:3000/static/js/0.chunk.js:322702)
    at :3000/static/js/0.chunk.js:214962
TooltipPopoverWrapper.js:212 The above error occurred in the <ErrorBoundary> component:
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at ParticipantTable.jsx:108)
    in ParticipantTable (at Participant.jsx:65)
    in div (created by TabPane)
    in TabPane (at TabPanel.jsx:89)
    in div (created by TabPanelList)
    in div (created by TabPanelList)
    in TabPanelList (created by ForwardRef(Tabs))
    in div (created by ForwardRef(Tabs))
    in ForwardRef(Tabs) (created by Context.Consumer)
    in Tabs (at TabPanel.jsx:79)
    in TabPanel (at Participant.jsx:72)
    in Participants (at Layout.jsx:144)
    in main (at Layout.jsx:143)
    in div (at Layout.jsx:59)
    in Layout (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:41)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:40)
    in Provider (at src/index.js:39)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ TooltipPopoverWrapper.js:212
TooltipPopoverWrapper.js:212 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at ParticipantTable.jsx:108)
    in ParticipantTable (at Participant.jsx:65)
    in div (created by TabPane)
    in TabPane (at TabPanel.jsx:89)
    in div (created by TabPanelList)
    in div (created by TabPanelList)
    in TabPanelList (created by ForwardRef(Tabs))
    in div (created by ForwardRef(Tabs))
    in ForwardRef(Tabs) (created by Context.Consumer)
    in Tabs (at TabPanel.jsx:79)
    in TabPanel (at Participant.jsx:72)
    in Participants (at Layout.jsx:144)
    in main (at Layout.jsx:143)
    in div (at Layout.jsx:59)
    in Layout (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:41)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:40)
    in Provider (at src/index.js:39)

And there is my code

Code

import React, { useEffect } from 'react';
import MaterialTable from '@material-table/core';
import ConfirmDialogButton from "../../components/ConfirmDialogButton/ConfirmDialogButton";
import Moment from 'moment';
import axios from "../../services/api";
import { REACT_APP_API_BASE_URI_PARTICIPANT_SEARCH } from "../../constant/searchEndPoints";
import localization from "../../constant/localizationMaterialTable"
import { REACT_APP_API_BASE_URI_IMAGE } from "../../constant/cvImage";
import { Button } from 'antd';
import { PictureTwoTone } from '@ant-design/icons';

const ParticipantTable = ({ participants, onAdd, programs, onDelete, onUpdate, onAddNewTab, ...props }) => {
    let tableRef = React.createRef();

    useEffect(() => {
        console.log(tableRef.current);
        tableRef.current.onQueryChange();

    }, [tableRef]);

    const columns = [
        {
            title: "Adı",
            field: "name"
        },
        {
            title: "Soyadı",
            field: "surname"
        },
        {
            title: "TC No",
            field: "tckn"
        },
        {
            title: "Doğum Tarihi",
            field: "birthdate",
            render: (participant) => Moment(participant.birthdate, "YYYY/MM/DD").format("DD/MM/YYYY"),
        },
        {
            title: "Baba Adı",
            field: "fatherName"
        },
        {
            title: "Telefon Numarası",
            field: "phoneNumber"
        },
        {
            title: "İş Telefon Numarası",
            field: "workPhoneNumber"
        },
        {
            title: "Fotoğraf",
            field: "photo",
            render: (participant) => {
                const fileName = participant.photo && participant.photo.match(/[^\\/]+\.[^\\/]+$/);
                if (fileName) {
                    return (
                        <Button ghost icon={<PictureTwoTone style={{ fontSize: "32px" }} />} onClick={() => {
                            window.open(`${process.env.REACT_APP_API_BASE_URI}${REACT_APP_API_BASE_URI_IMAGE}${participant.id}`);
                        }}></Button>
                    )
                }
                return "Fotoğraf Yok"
            }
        },
        {
            title: "Aktiflik",
            field: "active",
            render: (participant) => participant.active ? <p style={{ color: "green" }}>Aktif</p> : <p style={{ color: "red" }}>Pasif</p>
        },
        {
            title: "",
            cellStyle: {
                textAlign: "center",
            },
            render: (participant) => (
                <Button style={{ borderRadius: "14px" }} onClick={() => onAddNewTab(participant, (participant.name + " " + participant.surname))}>
                    Detay
                </Button>)
        },
        {
            title: "",
            cellStyle: {
                textAlign: "center",
            },
            render: (rowData) => (
                <React.Fragment>
                    <ConfirmDialogButton onYes={() => onDelete(rowData.id)} question="Katılımcıyı silmek istediğinize emin misiniz ?" />
                </React.Fragment>
            )
        },
    ]

    const searchResponse = (url, resolve, queryData) => {
        url += `searchParam=${queryData.searchParam}&pageNo=${queryData.pageNo}&pageSize=${queryData.pageSize}`;
        axios()
            .get(url)
            .then((result) => {
                resolve({
                    data: result.data.itemList,
                    page: result.data.currentPage,
                    totalCount: result.data.totalItems,
                });
            });
    };
    return (
        <>
            <MaterialTable
                tableRef={tableRef}
                localization={localization}
                columns={columns}
                data={(query) =>
                    new Promise((resolve, reject) => {
                        const queryData = {
                            searchParam: query.search,
                            pageNo: query.page,
                            pageSize: query.pageSize,
                        };
                        searchResponse(
                            `${REACT_APP_API_BASE_URI_PARTICIPANT_SEARCH}`,
                            resolve,
                            queryData
                        );
                    })
                }
                title="Katılımcılar"
            />
        </>
    )
}

export default ParticipantTable;

Version of package

    "@material-table/core": "^2.3.40",

[oze4]

Hello! Per our guidelines, can you please provide a reproducible sandbox? You can fork this starter template to make it easier.

Also, you can use a free API, like this one to create similar behavior.

[oze4]

Please reopen if you get that sandbox created!

[robincsamuel]

@oze4 Can you please reopen the issue? I've created a sandbox that demonstrates the issue. To replicate the problem, please navigate to the last page of the table and delete the last item. Please note, the data function is mimicking an API response in order to simulate a deletion.