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

Posted 2023-02-22

【中文标题】ReactJS进度条使用状态动态更新？

【英文标题】：ReactJS progress bar dynamically updating using state?

【发布时间】：2021-01-27 20:58:29

【问题描述】：

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

【问题讨论】：

如果您使用一个函数来执行 setInterval() 并在 useEffect 中调用该函数会怎样？

@TasosBu 我也试过了（见更新）

@monkeys73 - 我希望this 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 毫秒运行一次（函数及其参数的相同值/引用），因为依赖数组为空。 这意味着，它读取 progressBarValue 的初始值，而不是简单地读取下一个值，因为它不是 useEffect 的依赖项。

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

【讨论】：

没问题 :) :)