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

编程问答 2022-06-08

问题描述

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

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);
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

primereactreact-hooksreactjsreactjstypescripttypescript