Используйте React-Hook с перенаправлением и setTimeout

Question

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

, как я пишу выше, я использую hooks + useffect, но не могу: /

Крюк

    const [redirect, setRedirect] = useState(true)

    useEffect(() => {
    const interval = setInterval(() => {
      setRedirect(redirect => redirect - 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

Мой модальный

            <Modal className="modalValidateRegister" isOpen={modalOpen} toggle={() => setModalOpen(!modalOpen)} >
                <div className="containerModaluser">
                    <ModalBody>
                        <h1 className="welcomeRegister" >Bienvenue chez</h1> <img className="iconBrableRegister" src={brable} alt="icone-user" /> <span className="userRegister">{username}</span>
                        <img className="iconBeer" src={tchin} alt="icone-user" />
                        <Link to="/PaymentScreen">
                            <label className="linkPayment" href="">C'est l'heure de payer ta tournée !</label>
                        </Link>
                        Redirection dans {redirect}. 
                        <img className="iconBeer2" src={tchin} alt="icone-user" />
                    </ModalBody>
                </div>
            </Modal>

Мой Axios после аутентификации пользователя

    const onSubmit = async function onSubmit(values) {
        axios({
            method: 'POST',
            url: 'http://localhost:4242/registerUser',
            data: values,
            headers: { 'Content-Type': 'application/json' },
        })
            .then((res) => {
                localStorage.setItem("token", res.headers["x-access-token"])
                setModalOpen(true);
                setUsername(nameRef.current.value);
                setRedirect(true);
            })
            .catch(function (erreur) {
                //On traite ici les erreurs éventuellement survenues
                console.log(erreur);
            })
    }

Answer 1

Ваш useEffect вызывается только после того, как ваш компонент был смонтирован, потому что вы передали [] во втором аргументе. Если вы хотите иметь побочный эффект, основанный на каком-то состоянии, вам нужно что-то вроде этого:

useEffect(() => {
    let interval = null;
    if (redirect) {  
       setRedirect(false);
       interval = setInterval(() => {
          // Redirect to another page
       }, 1000);
    }
    return () => interval ? clearInterval(interval) : null;
  }, [redirect])

Передача свойства, для которого вы хотите иметь побочный эффект, это то, что вы должны сделать. https://reactjs.org/docs/hooks-effect.html