1 year ago
#306468
Kamal Kumar
React: Can't perform a React state update on an unmounted component. Sharing state between 2 components and updating it withing each other's component
I am a newbie in react and developing applications using react js (front) and express (API backend). Let say I have an organization table fetched over through API. The state network storing the fetched response is shared by both components <EnhancedTable/> and <FullScreenDialog/> rendered by react router
export default function OrganizationTables({nav, setNav}) {
const {networkName} = useParams();
const [network, setNetwork] = React.useState(false);
const networkExists = React.useCallback(async () => {
let res = await getNetworkExists(networkName);
if(res.data.network===undefined)
setNetwork(res.data);
}, [networkName]);
React.useEffect(() => {
networkExists();
}, [networkExists, key]);
return(
<Routes>
<Route path='/' element={<EnhancedTable nav={nav} setNav={setNav} network={network} networkName={networkName}/>}/>
<Route path='/new' element={<FullScreenDialog network={network} setNetwork={setNetwork} />}/>
</Routes>
)}
The <FullScreenDialog> box is used to create a new organization and when successful it redirects (using react router's useNavigate() function) it to the <EnhancedTable/>. When doing that I want to update the network state again to catch the newly created organization. So on handleSubmit function I do setNetwork(false) just to change network state. But this error pops up and things don't go as planned.
export default function FullScreenDialog({setNetwork}) {
const navigate = useNavigate();
....
...
const handleClose = () => navigate(`/superuser/networks/${networkName}/`);
const handleSubmit = (event) => {
event.preventDefault();
setLoading(true);
const data = new FormData(event.currentTarget);
createOrganization(
...
// CODE
...
.then(() => {setNetwork(false); handleClose()})
.catch((e)=> e.response.data.DETAILS? setFormResponseAlert(e.response.data.DETAILS): setFormResponseAlert(`Failed to connect to the server. Check your internet connection`))
.finally(()=>{
setTimeout(() => {
setLoading(false);
setOpen(true);
}, 500);
});
};
...
}
Can someone help me with this? I tried to put a key in Enhanced Component, well it gave me the same error
javascript
reactjs
react-component-unmount
react-usecallback
0 Answers
Your Answer