Javascript 在几秒钟内逐渐更新状态

我正在尝试模拟在web应用程序上运行的脚本。这个想法是一个脚本在后台运行并启动http请求，这些请求应该在一个div中显示为

。但是我不希望它运行得太快。首先，过快地更新状态并不能正确地更新状态，其次，它使用户很难看到状态

我尝试过使用setTimeout，但这不起作用，因为它似乎设置了一个超时，然后在不等待的情况下继续设置状态

AddParagraph = () => {

for(var i = 0; i < 20; i++){
 setTimeout(function(){
 this.setState({
    urls: [...this.state.urls, www.url.com/i]
 })},2000)
 }
}

add段落=（）=>{
对于（变量i=0；i<20；i++）{
setTimeout（函数（）{
这是我的国家({
url:[…this.state.url，www.url.com/i]
})},2000)
}
}

---

我已经读到在for循环中设置状态不是一个好主意，因为它没有时间渲染/更新那么快。但是我认为这样做不是一个好主意，我是否应该对此使用state？

这里的问题是，当所有异步操作（这里是

setTimeout

）启动时，

for

循环立即运行到完成

这是因为

for

循环在继续循环的下一次迭代之前不会等待异步操作完成，并且因为setTimout回调将在将来某个时间调用。因此，循环完成其迭代，然后setTimeout的所有回调同时触发，同时更新状态，从而导致竞争条件。另外，请记住，

setState

本身是异步的

您可以使用Promissions和async/await使您的代码保持同步，并按照您期望的方式进行操作，如下所示-

const delay = (time, i) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Setting state", i);
      this.setState({
        urls: [...this.state.urls, `www.url.com/${i}`]
      });
      resolve();
    }, time);
  });
};

const addParagraph = async () => {
  for (let i = 0; i < 10; i++) {
    await delay(1000, i);
  }
};

addParagraph();

const delay=（时间，i）=>{
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
console.log（“设置状态”，i）；
这是我的国家({
url:[…this.state.url，`www.url.com/${i}`]
});
解决（）；
}，时间）；
});
};
const addparagration=async（）=>{
for（设i=0；i<10；i++）{
等待延迟（1000，i）；
}
};
添加段落（）；

---

希望这有帮助

您似乎想添加请求的URL并将其登录到网页上

因此，您似乎对使用

for

循环“强制”更新状态感到困惑。
React本质上更像是一种声明性的，您的组件通常会对“状态”更改做出反应

因此，与其使用

setTimeout

（这需要使用

for

循环），不如让我们以设置的间隔“反应”状态更改

类组件（CC）版本 正如我看到的

this.state

，我假设您正在使用CC

类ClassRequestViewer扩展组件{
状态={
URL:[]，
职位：1
};
//用于清除间隔
//一个选项是使用index
}，2000*i）
将超时时间增加一倍，这将计划每2秒设置一次setState。谢谢你，这正是我想要的。尽管我对如何“停止”这种行为以及如何“开始”这种行为有点困惑。我希望它在onClick事件上启动，并在X行数之后停止。这似乎没完没了？@Moddah我已经更新了回复以回答您的评论。谢谢您的回答！非常优雅的解决方案这似乎完全符合我的要求，谢谢。尽管如此，与使用生命周期方法@Sung M.Kim那样做相比，这样做的优点/缺点是什么？@Moddah我的回答是针对您如何处理它以及您的代码所面临的问题。谈论这方面的优势/劣势…我认为这没有意义，因为两者都在以不同的方式对国家做相同的事情。。。一个使用钩子作为功能组件，另一个使用类组件…生命周期方法在两者中都被显式或隐式使用