'@react-page/react-admin Can't perform a React state update on an unmounted

Im using the module of @react-page/react-admin when i add more than one component in the same time like in the screenshot below

enter image description here i got this error enter image description here Desktop:

  • OS: window
  • Version React page: 4.5.0
  • React-admin version: 3.19.7
  • React version: 17.0.2
  • Browser: chrome
  • Stack trace (in case of a JS error):
    react-dom.development.js:67 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 a useEffect cleanup function.
        at Renderer (http://localhost:3000/static/js/bundle.js:43465:70)
        at div
    printWarning @ react-dom.development.js:67
    error @ react-dom.development.js:43
    warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:23914
    scheduleUpdateOnFiber @ react-dom.development.js:21840
    dispatchAction @ react-dom.development.js:16139
    (anonymous) @ index.tsx:132
    Promise.then (async)
    Renderer @ index.tsx:132
    renderWithHooks @ react-dom.development.js:14985
    updateFunctionComponent @ react-dom.development.js:17356
    beginWork @ react-dom.development.js:19063
    beginWork$1 @ react-dom.development.js:23940
    performUnitOfWork @ react-dom.development.js:22776
    workLoopSync @ react-dom.development.js:22707
    renderRootSync @ react-dom.development.js:22670
    performSyncWorkOnRoot @ react-dom.development.js:22293
    (anonymous) @ react-dom.development.js:11327
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    flushSyncCallbackQueueImpl @ react-dom.development.js:11322
    flushSyncCallbackQueue @ react-dom.development.js:11309
    batchedUpdates$1 @ react-dom.development.js:22387
    notify @ Subscription.js:15
    notifyNestedSubs @ Subscription.js:85
    handleChangeWrapper @ Subscription.js:90
    dispatch @ redux.js:297
    (anonymous) @ index.js:20
    dispatch @ redux.js:659
    (anonymous) @ insert.ts:205
    setTimeout (async)
    (anonymous) @ insert.ts:204
    (anonymous) @ index.js:16
    (anonymous) @ nodeActions.ts:282
    (anonymous) @ index.tsx:32
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
    executeDispatch @ react-dom.development.js:8243
    processDispatchQueueItemsInOrder @ react-dom.development.js:8275
    processDispatchQueue @ react-dom.development.js:8288
    dispatchEventsForPlugins @ react-dom.development.js:8299
    (anonymous) @ react-dom.development.js:8508
    batchedEventUpdates$1 @ react-dom.development.js:22396
    batchedEventUpdates @ react-dom.development.js:3745
    dispatchEventForPluginEventSystem @ react-dom.development.js:8507
    attemptToDispatchEvent @ react-dom.development.js:6005
    dispatchEvent @ react-dom.development.js:5924
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    discreteUpdates$1 @ react-dom.development.js:22413
    discreteUpdates @ react-dom.development.js:3756
    dispatchDiscreteEvent @ react-dom.development.js:5889

1- goto https://codesandbox.io/s/adoring-tess-x11ve?file=/src/App.tsx

2- click
enter image description here

3- add more than 1 component enter image description here

4- check the console enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source