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

将React-Hook与重定向和setTimeout一起使用

1 个答案: