Material-table: Error while deleting last item in last page

[rahmatya685]

Hi
There is an error in the grid while deleting last item of last page. Im getting data from a remote endpoint using Promise

this is the error log

An error has occurred while a drag is occurring. Any existing drag will be cancelled. > 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.

react-beautiful-dnd.esm.js:5248 raw Invariant Violation: 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 invariant (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:55:15)
at scheduleWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18734:5)
at Object.enqueueSetState (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:12457:5)
at NoSsr.Component.setState (webpack:///./node_modules/react/cjs/react.development.js?:375:16)
at NoSsr.componentDidMount (webpack:///./node_modules/material-table/node_modules/@material-ui/core/NoSsr/NoSsr.js?:87:14)
at commitLifeCycles (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16227:22)
at commitAllLifeCycles (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17592:7)
at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:149:14)
at Object.invokeGuardedCallbackDev (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:199:16)
at invokeGuardedCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:256:31)

The above error occurred in the component:
in DragDropContext (created by MaterialTable)
in MaterialTable
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (created by UsersGrid)
in div (created by UsersGrid)
in UsersGrid (created by Context.Consumer)
in withSnackbar(UsersGrid) (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by MapView)
in div (created by SwipeableBottomSheet)
in div (created by ReactSwipableView)
in div (created by ReactSwipableView)
in div (created by ReactSwipableView)
in ReactSwipableView (created by SwipeableBottomSheet)
in div (created by SwipeableBottomSheet)
in SwipeableBottomSheet (created by BottomSheet)
in BottomSheet (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by MapView)
in div (created by MapView)
in MapView (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by dashboard)
in main (created by dashboard)
in div (created by dashboard)
in MuiThemeProviderOld (created by dashboard)
in dashboard (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by Context.Consumer)
in Route (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in SnackbarProvider (created by App)
in LocalizeProvider (created by App)
in MuiThemeProviderOld (created by App)
in App

react-dom.development.js:506 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) (created by UsersGrid)
in div (created by UsersGrid)
in UsersGrid (created by Context.Consumer)
in withSnackbar(UsersGrid) (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by MapView)
in div (created by SwipeableBottomSheet)
in div (created by ReactSwipableView)
in div (created by ReactSwipableView)
in div (created by ReactSwipableView)
in ReactSwipableView (created by SwipeableBottomSheet)
in div (created by SwipeableBottomSheet)
in SwipeableBottomSheet (created by BottomSheet)
in BottomSheet (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by MapView)
in div (created by MapView)
in MapView (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by dashboard)
in main (created by dashboard)
in div (created by dashboard)
in MuiThemeProviderOld (created by dashboard)
in dashboard (created by Context.Consumer)
in LocalizedComponent (created by WithStyles(LocalizedComponent))
in WithStyles(LocalizedComponent) (created by Context.Consumer)
in Route (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in SnackbarProvider (created by App)
in LocalizeProvider (created by App)
in MuiThemeProviderOld (created by App)
in App
warningWithoutStack @ react-dom.development.js:506
warnAboutUpdateOnUnmounted @ react-dom.development.js:17329
scheduleWork @ react-dom.development.js:18703
enqueueSetState @ react-dom.development.js:12457
Component.setState @ react.development.js:375
(anonymous) @ material-table.js:215
Promise.then (async)
(anonymous) @ material-table.js:209
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11339
commitLifeCycles @ react-dom.development.js:16257
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
requestWork @ react-dom.development.js:18920
scheduleWork @ react-dom.development.js:18729
enqueueSetState @ react-dom.development.js:12457
Component.setState @ react.development.js:375
(anonymous) @ material-table.js:215
Promise.then (async)
(anonymous) @ material-table.js:209
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11339
commitLifeCycles @ react-dom.development.js:16257
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
requestWork @ react-dom.development.js:18920
scheduleWork @ react-dom.development.js:18729
enqueueSetState @ react-dom.development.js:12457
Component.setState @ react.development.js:375
(anonymous) @ material-table.js:723
Promise.then (async)
(anonymous) @ material-table.js:720
callCallback @ react-dom.development.js:11312
commitUpdateEffects @ react-dom.development.js:11351
commitUpdateQueue @ react-dom.development.js:11339
commitLifeCycles @ react-dom.development.js:16257
commitAllLifeCycles @ react-dom.development.js:17592
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17788
completeRoot @ react-dom.development.js:19240
performWorkOnRoot @ react-dom.development.js:19169
performWork @ react-dom.development.js:19077
performSyncWork @ react-dom.development.js:19051
interactiveUpdates$1 @ react-dom.development.js:19320
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4880

[mbrn]

Hi @zanjan2010
Can you create a codesandbox example to examine bug, please?

[rahmatya685]

Sorry currently It's not possible
The error happens when the last item deleted and grid tries to load the current page (eg page 5) data and when the totalCount property of zero passed to resolve function grid tries to load page 4 and this time it never gets inside then{} block code and it traps on an inifinitive loop

this is the code I used to load data

`   new Promise((resolve, reject) => {
              let url = "${Strings.baseUrl}/protected/hospitals?"
              url += "size=" + query.pageSize
              url += "&page=" + (query.page)
              fetch(url, {
                method: "GET",  
                mode: "cors",
                headers: {
                  "Authorization": this.getToken(),
                  "content-type": "application/json",
                       }
                        })
                           .then(response => {

                  if (response.ok) {
                    response.json().then(result => {
                      resolve({
                        data: result.content,
                        page: result.number,
                        totalCount: result.totalElements,
                      })
                    })
                  } else {
                    reject()
                  }

                }).catch(error => { console.log("Error:", error) })

            })`

[mbrn]

I will try to reproduce this case.

[rahmatya685]

Thanks man

[Justin2997]

Same problem here ! Let me know if I can help !

[FrancoAucamp]

Did you ever solve this?

[familiarcat]

Also having this issue using small variations of example code. No drag has been initiated... Yeah, after throwing some catches around it, it totally appears your product is a little broken. Sucks. Looked really good...

[newpost]

Is There a temporary solution? long time no fixed.

[mtoan2111]

I'm not sure what your server is. But, I think that, you need to hack a bit from the server side code

Assume that, "page" is the query parameter from client
See an example by using C#

var pageSize = 20;
List<object> mydata;  // --> data 
var dataCount = mydata.Count(); 
var totalPage = Math.ceil((double)dataCount / (double)pageSize); // -> Calc your totalPage here
if (totalPage < page){
   page = (int)totalPage; // -> Check your poper page here
}
var skipOffset = pageSize * (page - 1); // -> Calc the offset here
var result = mydata.Skip(skipOffset).Take(pageSize); // -> Paging here

Result video:
https://www.youtube.com/watch?v=cbh-9tyf934&feature=youtu.be

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.