I tried to count down the second and reload the page, the second showed in the component is correct but the printed on the console was always 5, so I couldn't reload.
I want to count down and reload the page. Where do I put window.location.reload()? and why count
always showed 5, but setCount
is normal and decrease every second?
This is the code:
function Register() {
const dispatch = useDispatch();
const [count, setCount] = useState(5);
const timeountToReload = () => {
const interval = setInterval(() => {
console.log(count); // always 5 here
if (count === 0) {
window.history.pushState({}, '', '/');
window.location.reload();
}
setCount((count) => count - 1);
}, 1000);
return () => clearInterval(interval);
};
const handleRegister = async (e, value) => {
e.preventDefault();
setSuccessful(false);
setFormControlDisable(true);
await dispatch(register({ username, email, password }))
.then(unwrapResult)
.then((result) => {
setSuccessful(true);
timeountToReload();
})
.catch((error) => {});
setFormControlDisable(false);
};
return (
<Container style={{ marginTop: '15%' }}>
<Row className='justify-content-md-center'>
<Col md={{ span: 4, offset: 0 }} style={{ border: 'green solid 5px' }}>
{count}
<RegisterForm
handleUsernameChange={handleUsernameChange}
handlePasswordChange={handlePasswordChange}
handleComfirmedPasswordChange={handleComfirmedPasswordChange}
handleEmailChange={handleEmailChange}
handleRegister={handleRegister}
username={username}
password={password}
comfirmedPassword={comfirmedPassword}
email={email}
errors={errors}
message={message}
successful={successful}
count={count} // component shows normal and refresh every second
formControlDisable={formControlDisable}
/>
</Col>
</Row>
</Container>
);
}
export default Register;
CodePudding user response:
I think that inside the interval you passed a function instead of a value to the setCount. try to replace
setCount(count => count - 1)
with
setCount(count - 1)
CodePudding user response:
Try to keep track of count
changes using the useEffect
hook:
const timeountToReload = () => {
const interval = setInterval(() => {
setCount((count) => count - 1);
}, 1000);
return () => clearInterval(interval);
};
useEffect(() => {
console.log(count);
if (count === 0) {
window.location.reload();
}
}, [count]);
Link to playground.
CodePudding user response:
you should use useEffect
with the count
as dependency to watch its chages, because inside setInterval
it won't update
useEffect(() => {
if (count === 0) {
window.history.pushState({}, '', '/');
window.location.reload();
};
}, [count]);