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

Question

我正在使用 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);
    }

Answer 1

这不是在 useEffect 中使用区间函数的正确方法 you can read more here

正确的做法是这样的：

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

LIVE DEMO

您的实施存在问题，progressBarValue 未在 useEffect 中更新。
setInterval 的回调被编译一次，然后每 1000 毫秒运行一次（与函数及其参数相同的 value/reference），因为依赖数组为空。
这意味着，它读取 progressBarValue 的初始值并且不会简单地读取下一个值，因为它不是 useEffect.

的依赖项

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

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

ReactJS progress bar dynamically updating using state?

reactjs

typescript

react-hooks

primereact