如何使用材质UI组件创建计时器

Question

我正试图创建一个加载页面，在将用户重定向到主面板之前，在启动stuff时延迟用户。使用材料UI循环进度条组件，我想在1:15的时间内增加到100%，然后重定向用户。

这就是我的功能：

React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => prevProgress + 1);
}, 1000);
if (progress >= 100) navigate('/dashboard');
return () => {
clearInterval(timer);
};
}, []);

进度已显示，但永远不会重定向。

Answer 1

您应该为该使用另一个useEffect

React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => prevProgress + 1);
}, 1000)
return () => {
clearInterval(timer);
};
}, []);
React.useEffect(() => {
if (progress >= 100) navigate('/dashboard');
}, [progress]);