Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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. #7147

Closed
neutron92 opened this issue Jan 27, 2022 · 6 comments · Fixed by #7165
Labels

Comments

@neutron92
Copy link

neutron92 commented Jan 27, 2022

What you were expecting:
I'm in a create page contains SimpleForm with some inputs and a reference input and i want to navigate to an other page by clicking in the menu or any other link

What happened instead:
i got this error in console
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.
Caused by the input refrence
image

Steps to reproduce:
Click in the ReferenceInput with or without selecting any option then change the page via the menu in the topbar or sidebar

Related code:
image
image

export const LanguagesInput = (props: any) => {
  return (
    <ReferenceArrayInput
      source={props.source}
      reference={props.reference}
      >
        <AutocompleteArrayInput optionValue="id" optionText="locale" allowEmpty={false}/>
    </ReferenceArrayInput>
  );
};
<LanguagesInput
   source="languagesIds"
  reference="languages"
></LanguagesInput>

Environment

  • React-admin version: 3.19.7
  • React version: 17.0.2
  • Browser: chrome
  • Stack trace (in case of a JS error):

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 ReferenceArrayInput (http://localhost:3000/static/js/bundle.js:126452:21)
    at LanguagesInput (http://localhost:3000/static/js/bundle.js:300:19)
    at div
    at FormInput (http://localhost:3000/static/js/bundle.js:123900:21)
    at div
    at CardContent (http://localhost:3000/static/js/bundle.js:6796:23)
    at WithStyles (http://localhost:3000/static/js/bundle.js:31334:31)
    at CardContentInner (http://localhost:3000/static/js/bundle.js:128366:25)
    at form
    at SimpleFormView (http://localhost:3000/static/js/bundle.js:124088:21)
    at FormView (http://localhost:3000/static/js/bundle.js:109805:29)
    at ReactFinalForm (http://localhost:3000/static/js/bundle.js:160931:20)
    at FormContextProvider (http://localhost:3000/static/js/bundle.js:109219:21)
    at RecordContextProvider (http://localhost:3000/static/js/bundle.js:96302:21)
    at FormWithRedirect (http://localhost:3000/static/js/bundle.js:109655:18)
    at SimpleForm
    at div
    at Paper (http://localhost:3000/static/js/bundle.js:17388:23)
    at WithStyles (http://localhost:3000/static/js/bundle.js:31334:31)
    at Card (http://localhost:3000/static/js/bundle.js:6631:23)
    at WithStyles (http://localhost:3000/static/js/bundle.js:31334:31)
    at div
    at div
    at CreateView (http://localhost:3000/static/js/bundle.js:122611:23)
    at RecordContextProvider (http://localhost:3000/static/js/bundle.js:96302:21)
    at SaveContextProvider (http://localhost:3000/static/js/bundle.js:97234:21)
    at CreateContextProvider (http://localhost:3000/static/js/bundle.js:96881:21)
    at ResourceContextProvider (http://localhost:3000/static/js/bundle.js:103245:21)
    at Create (http://localhost:3000/static/js/bundle.js:122523:72)
    at CountryCreate
    at WithPermissions (http://localhost:3000/static/js/bundle.js:94298:26)
    at Route (http://localhost:3000/static/js/bundle.js:165311:29)
    at Switch (http://localhost:3000/static/js/bundle.js:165513:29)
    at ResourceContextProvider (http://localhost:3000/static/js/bundle.js:103245:21)
    at ResourceRoutes (http://localhost:3000/static/js/bundle.js:103111:20)
    at Resource (http://localhost:3000/static/js/bundle.js:103183:18)
    at Route (http://localhost:3000/static/js/bundle.js:165311:29)
@djhi
Copy link
Contributor

djhi commented Jan 27, 2022

Please follow the issue template

@neutron92
Copy link
Author

neutron92 commented Jan 27, 2022

@djhi can u take a look again?

@djhi
Copy link
Contributor

djhi commented Jan 27, 2022

Thanks for reporting this. Please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).

@neutron92
Copy link
Author

neutron92 commented Jan 27, 2022

@djhi
https://codesandbox.io/s/new-cherry-u53rk?file=/src/comments/PostReferenceInput.tsx

My changes are here PostReferenceInput.tsx
image

how you can reproduce it:

  • go to create a comment page click in the posts section Juste let it list for you the available posts of the list
    image
  • then without try to change the page by clicking in the sidebar menu
    image

and you will see the error
image

@djhi
Copy link
Contributor

djhi commented Jan 27, 2022

Thanks for the report! We'll look into it

@WiXSL
Copy link
Contributor

WiXSL commented Jan 31, 2022

Reproduced!
I'll look into it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants