'@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 |
|---|
