Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

167
Vistas
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

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda