在 Next.js 中使用 setInterval 的问题

Question

我正在使用 Next.js 和 tailwind.css 创建一个进度条组件，并使用 javascript setInterval() 函数为其设置动画。花点时间阅读代码。这是下面的代码：

import React, { useState } from "react";

const ProgressBar = () => {
// starting at 1% of the width of the progress bar
 let [progress, setProgress] = useState(1);
function handleClick() {
let i = setInterval(() => {
setProgress(progress++);
},100)
if (progress == 100) {
clearInterval(i);
}
}
  return (
    <>
      <div className={`bg-gray-300 w-full`}>
        <div className={ `h-[30px] w-[${progress}%] bg-green-500`}></div>
      </div>
      <button onClick={handleClick}>Click me</button>
    </>
  );
};

export default ProgressBar;

现在的问题是当我运行开发服务器来测试它时。看起来好像在我单击按钮之前进度就已完成，它在单击按钮之前显示进度条的整个宽度为绿色，而不是其宽度的 1%，有时当我尝试使用此类方法时会出现一些参考错误作为全局变量而不是钩子，甚至是 DOM 方法，例如 document.getElementsByClassName().style.width；等等，请帮助我，您可以将其复制到您的工作区并运行开发服务器以查看结果。谢谢你。

我尝试使用 document.getElementById() 或 document.getElementsByClassName() 等方法以及全局变量和函数范围变量以及 useState() 等反应钩子来操作 DOM，但它给了我引用错误，告诉我钩子的变量保存初始值的变量未定义，或者我在组件顶部声明的稍后要操作的全局变量和函数范围变量未定义，或者即使在单击按钮之前它也显示进度条已完成，就好像 setInterval 没有效果一样

Answer 1

setInterval 函数捕获由于闭包而导致的进度初始值，这意味着间隔函数在其整个生命周期中继续使用初始值。