score:1
As the warning suggests, because your API code is asynchronous, if you redirect away from the page too fast, the setState may occur after the component has already been unmounted. What you can do, is use the callback
argument of setState
(assuming you're calling setState
somewhere in the setUserLogin
function), to redirect after the state update has already been completed.
Edit: You could try adding another state variable to your context to signify that an update has been performed, something like updated: false
and then with your setUserLogin
call:
setUserLogin({
...userLogin,
name: userProfile.name,
updated: true
});
Then you can use the useEffect
hook to check for this condition and then redirect:
useEffect(() => {
if (userLogin.updated) {
router.push('/mypage');
}
})
Then at some point, you would have to reset this variable to false
. However, now that I know your setUserLogin
is coming from the AppContext
component, I think the issue is that this component is getting unmounted when it shouldn't be. Make sure you're rendering this component high enough in the component tree so that the mypage
you redirect to still has this AppContext
mounted
Edit 2: A good approach to prevent this error is by adding a guard to a component class, which keeps track of whether the component is mounted or not. Something like this:
class AppContext extends Component {
_mounted = False;
componentDidMount() {
this._mounted = true;
}
componentWillUnmount() {
this._mounted = false;
}
...
}
Then, when you call setState
or the update function from useState
, you can first check to see if the component is mounted or not before trying to update:
if (AppContext._mounted) {
setUserLogin({
...userLogin,
name: userProfile.name,
updated: true
});
}
However, in your case, this may prevent the information from being updated as you expect, since the component is unmounting, which is why I think the issue lies with why the component is unmounting
Source: stackoverflow.com
Related Query
- How to fix React WArning : Can't perform a React state update on an unmounted component
- react router v6 won't switch to Home Page after Login Page: Warning: Can't perform a React state update on an unmounted component
- Warning: Can't perform a React state update on an unmounted component after update context and redirect to another page
- React useEffect Warning Warning: Can't perform a React state update on an unmounted component
- useFetch Can't perform a React state update on an unmounted component warning
- Can't perform a React state update on an unmounted component after API fetch
- React useEffect warning in MERN App: Can't perform a React state update on an unmounted component
- Can't perform a React state update on an unmounted component warning
- Can't perform a React state update on an unmounted component
- React useEffect causing: Can't perform a React state update on an unmounted component
- React-hooks. Can't perform a React state update on an unmounted component
- Warning: Can't perform a React state update on an unmounted component. In a functional component
- useEffect - Can't perform a React state update on an unmounted component
- Error : Can't perform a React state update on an unmounted component
- Can't perform a React state update on an unmounted component with fetch POST method
- react-top-loading-bar Warning: Can't perform a React state update on an unmounted component
- how to remove the warning "can't perform a react state update on unMounted Component"
- React - Can't perform a React state update on an unmounted component
- React testing library: An update inside a test was not wrapped in act(...) & Can't perform a React state update on an unmounted component
- Ionic React Overmind Can't perform a React state update on an unmounted component
- Router events cause an error while being used on the constructor Warning: Can't perform a React state update on an unmounted component
- ReactJS warning "Can't perform a react state update on an unmounted component" on return of Firebase promise in .then handler
- Trying to fix: Can't perform a React state update on an unmounted component
- Warning: Can't perform a React state update on an unmounted component
- ReactJS & Redux: Can't perform a React state update on an unmounted component
- Jest can't perform a React state update on an unmounted component + react state updates should be wrapped into act
- I get Error: Can't perform a React state update on an unmounted component even though i created cleanup
- React Can't perform a React state update on an unmounted component error
- Can't perform a React state update on an unmounted component problem in Interval function
- How to fix TypeError: Cannot read property 'randomProperty' of undefined + Warning 'Can't perform a React state update on an unmounted component'
More Query from same tag
- Can I send several events on action in flux?
- useState (setState) not setting array items as intended
- ReactJS - based on input value - auto set the selection option
- How to detect addEventlistener when html page is already opened via Iframe in Reactjs
- Can't set state data
- "GSAP target not found" in react.js and animation happens on its own on hot reload
- property of the javascript object is undefined
- How can I solve my TypeScript/ESLint/Webpack transpiling problem
- Dropzone / React / NodeJS - Upload Image Array
- Reactjs access Object property from JSON in Child companent using props
- Reactjs shows only first record each time a modal pop up button is clicked
- Show SnackBar Material UI when appear erron in Mutation
- Correct approach to handle react-routes on a server?
- Redux-Thunk getStore() doesn't retain state. Returning 'undefined'
- Netlify deployment of Gatsby/Wordpress site failing
- How to add custom Validation in antd form in react?
- Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified
- Fetch data after login
- Keycloak Roles: Uncaught TypeError: Cannot read properties of undefined (reading 'roles') - React
- React Native authentication and cloud Firestore for web apps
- How to animate the disappearance of a component in ReactJS?
- This.setState ignoring
- Variable "theme" is used before being assigned
- How can I remove some element in List with Immutable?
- How to use onload in react?
- Dynamic Route not being loaded with nested routing
- Rendering a specific javascript object
- How to make useEffect listening to any change in localStorage?
- MUI 5 - keyframe animation using styled API not working
- Can a component internally assign a ref to one of it's children?