Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

175
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda