javascript - 将 React-Hook 与重定向和 setTimeout 结合使用

Question

我在注册用户后显示了一个模式，我希望它在重定向几秒钟后消失

正如我上面所写，我使用了 hooks + useffect 但不能:/

Hook

    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