reactjs - ReactJs/NextJS - 5 秒后自动重定向到另一个页面
问题描述
- 我正在创建欢迎页面,该页面应在客户登录后立即出现,并且此页面应在 5 秒后自动将客户重定向到另一个页面。我尝试使用默认值为 5 秒的 setState,然后使用 1000 毫秒的 setInterval,将其减 1,当涉及到 0 时,重定向客户。
Console.log() 总是返回 5,所以基本上在前端我总是看到这句话:欢迎,您已成功登录,您将被重定向.. 4
看起来像这样,因为 setRedirectSeconds() 是异步的,它不会立即更新状态,每当我的 setInterval 函数再次启动时,redirectSeconds 每次仍然是 5。
如何解决?
这是我的代码:
const Welcome: NextPage = (): ReactElement => {
const [redirectSeconds, setRedirectSeconds] = useState<number>(5);
const router = useRouter();
const query = router.query;
useEffect(() => {
if (query?.redirect) {
setTimeout(() => {
const interval = setInterval(() => {
console.log(redirectSeconds);
if (redirectSeconds > 0) {
setRedirectSeconds(redirectSeconds - 1);
} else {
clearInterval(interval);
router.push(query.redirect.toString());
}
}, 1000)
}, 1000);
}
}, []);
return (
<div>
Welcome, you have successfully logged in, you will be redirected in.. {redirectSeconds}
</div>
);
};
export default Welcome;
解决方案
这是我调整它的方法,现在它工作正常:
我删除了 setInterval 并添加了对 useEffect 函数的依赖。我在减少redirectSeconds 之前添加了1000 毫秒的超时。
useEffect(() => { if (query?.redirect) { if (redirectSeconds == 0) { router.push(query.redirect.toString()); return; } setTimeout(() => { console.log(redirectSeconds); setRedirectSeconds((redirectSeconds) => redirectSeconds - 1); }, 1000) } }, [redirectSeconds]);
推荐阅读
- reverse-proxy - traefik 运行但不使用 toml 文件
- regex - 在 .htaccess 文件中使用 HTTP_HOST
- express - STRIPE“不能代表 Standard 和 Express 关联账户接受服务条款”
- sql - 在 PostgreSQL 查询的输出中获取重复值
- linux - 查找所有带有“异常”消息的 jvm 日志文件并列出 uniq 异常的计数
- python - 在 Python 控制台中捕获 Postgresql 函数返回字符串
- flutter - 如何停止在 Flutter Web 中缩小文本
- c - 为什么scanf会导致无限的forool
- for-loop - 为什么此代码段无法编译而 `print(square(3,0))` 可以?
- maven - Intellij MANIFEST.MF 无法解析 Main-Class 属性