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

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

---

这不是在useEffect中使用interval函数的正确方法

正确的方法是：

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

您的实现存在的问题是，

progressBarValue

未在useEffect中更新。

setInterval

的回调编译一次，然后每1000ms运行一次（函数及其参数的相同值/引用），因为依赖项数组为空。
这意味着，它读取

progressBarValue

的初始值，而不读取下一个值，因为它不是useEffect的依赖项

---

在我的实现中，

setProgressBarValue（）

使用回调读取状态的上一个值并增加它。

如果您使用函数执行setInterval（）并在useEffect内调用该函数会怎么样？@TasosBu我也尝试过（请参见更新）@monkeys 73-我希望解决了您的问题。如果是，您可以通过将社区标记为已接受（单击大复选标记）来帮助社区✓ 答案的左边）。公认的答案有助于未来的访问者自信地使用解决方案。没问题：）：）

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