ReactJS进度条使用状态动态更新

Question

我正在使用PrimeAreact进度条，希望在页面加载时动态更新它。我的代码在下面-

const IntroPage = () => {
const [progressBarValue, setProgressBarValue] = useState(0)
useEffect(() => {
setInterval(function() {
let val = progressBarValue;
val += Math.floor(Math.random() * 10) + 5;
if (val >= 100) {
val = 100;
}
setProgressBarValue(val)
}, 1000);
}, [])
return (
<div className='main-container'>
<div></div>
<div className='progress-bar-container'>
<ProgressBar className='progress-bar' value={progressBarValue}></ProgressBar>
</div>
<div></div>
</div>
)
}

出于某种原因，当我加载页面时，进度条不会不断地增加到100，它会来回移动，我不太确定为什么会发生这种情况。所以它会上升到8%或10%，然后下降到6%，等等。我认为问题是，每次设置新状态时，都不会在上一个设置状态的基础上添加。如有任何帮助，我们将不胜感激。

更新：我也尝试过将setInterval放在一个单独的函数中并调用它，但这也做了同样的事情-

useEffect(() => {
loadProgressBar() 
}  
}, [])
function loadProgressBar() {
setInterval(function(){ 
let val = progressBarValue;
val += Math.floor(Math.random() * 10) + 5;
if (val >= 100) {
val = 100;
clearInterval();
}
setProgressBarValue(val)
}, 1000);
}

Answer 1

这不是在useEffect中使用区间函数的正确方法你可以在这里阅读更多

正确的方法是：

useEffect(() => {
const intervalId = setInterval(() => {
setProgressBarValue((prev) => {
if (prev >= 100) {
clearInterval(intervalId);
return 100;
} else {
return prev + 5;
}
});
}, 1000);
return () => clearInterval(intervalId);
}, []);

实时演示

实现的问题在于，在useEffect中没有更新progressBarValue
setInterval的回调编译一次，然后每1000ms运行一次(函数及其参数的值/引用相同(，因为依赖数组为空
这意味着它读取progressBarValue的初始值，而不简单地读取下一个值，因为它不是useEffect的依赖项。

在我的实现中，setProgressBarValue()使用回调读取状态的前一个值并增加它