Блог

Я пытаюсь установить загрузчик в своем веб-приложении React, но это ошибка, которая постоянно отображается:

 index.js:1 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.
    in RegistrazioneBici (at App.js:31)
    in Route (at App.js:27)
    in div (at App.js:24)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:22)
 

У меня есть компонент моего приложения, который содержит все возможные маршруты.

 const App = () => {
  const [loading, setLoading] = useState(false);

  return (
    <div>
      {loading === false ? (
        <>
          <Router>
            <Navbar2 />
            <div className="containerApp">
              <Route path="/" exact render={(props) => <Home />} />
             
              <Route
                path="/registrazionebici"
                exact
                render={(props) => (
                  <RegistrazioneBici
                    loading={loading}
                    setLoading={setLoading}
                    {...props}
                  />
                )}
              />        
              <Route
                path="/adminnotarizzazione"
                exact
                render={(props) => <Admin setLoading={setLoading} {...props} />}
              />
            </div>
            <Separatore color={"#eee"} />
            <Footer />
          </Router>
        </>
      ) : (
        <Loader />
      )}
    </div>
  );
};
 

и это код для RegistrationBici.js во время отправки формы:

 const handleSubmit = async (e) => {
    e.preventDefault();

    setModalShow(false);
    setHashCampi("");
    
    const isValid = await controllaCampi(); //validation of the fields
    if (isValid) {
      // setLoader(true);
      props.setLoading(true);

      responseHash = await eseguiHash( //hash of the fields
        nome,
        cognome,
        email,
        marca,
        modello,
        telaio
      );
      
      ... other dbcalls ....

      props.setLoading(false);
      setModalShow(true);
    } else {
      console.log("There is an error");
    }
    props.setLoading(false)
  };
 

Я попытался добавить состояние локально в Registrazione.js для того, чтобы ошибка исчезла, и она работает, но в этом случае загрузчик затмевает только содержимое файла, а не панель навигации.

Может кто-нибудь помочь мне решить эту проблему?