ReactJs/NextJS - 5秒后自动重定向到另一个页面

Question

• 我正在创建欢迎页面，该页面应在客户登录后立即显示，并且该页面应在 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;

Answer 1

这是我调整的方法，现在工作正常：

• 我删除了 setInterval 并添加了对 useEffect 函数的依赖性。我在减少redirectSeconds 之前添加了1000ms 的超时。

   useEffect(() => {
   if (query?.redirect) {
       if (redirectSeconds == 0) {
           router.push(query.redirect.toString());
           return;
       }
  
       setTimeout(() => {
           console.log(redirectSeconds);
           setRedirectSeconds((redirectSeconds) => redirectSeconds - 1);
       }, 1000)
   }
  }, [redirectSeconds]);