将 React-Hook 与重定向和设置超时一起使用

Question

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

正如我上面写的，我使用钩子 + 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