Javascript 使用setTimeout设置状态时，如何重新渲染react组件？

我试图编写一个每隔几秒钟更新一次时间线的组件，因此我使用了类似这样的for循环，并使用

setTimeout

使时间间隔更加明显：

let tmp = this.state.colors;
// colors is an array
for(let i = 0 ; i < 4; i++){
    if(tmp[i]=="blue"){
        tmp[i]="green";
        setTimeout(function () {
            console.log(tmp);
            this.mapped.setState({
                colors: tmp
            });
        }.bind({mapped:this}), 2000);
    }
}

---

上述代码有效。

我根据您的代码片段创建了一个草稿，如下所示：，

我的草稿有两个主要的改动

您应该使用

2000*i

设置超时时间。或者您可以使用setInterval并在以后清除它

更改setTimeout中回调函数中的颜色

---

你怎么知道它不是每次都更新同一个tmp？（因此什么也没有）。在其中抛出一个

console.log（tmp）

，因为for循环非常快，所以应该使用

2000*i

设置超时。我刚刚在下面发布了一个答案。

2000*0=0；2000 * 1 = 2000; 2000 * 2 = 4000; 2000 * 3 = 6000;-为什么他需要执行
2000*i
？因为您在for循环中执行setTimeout，所以所有这些：setTimeout（func，0）、setTimeout（func，2000）、setTimeout（func，4000）、setTimeout（func，6000）几乎都在执行相同的时间。如果您不
*i
，您将获得setTimeout（func，2000）、setTimeout（func，2000）、setTimeout（func，2000）、setTimeout（func，2000）。他们几乎同时会这样做。你可以用我的codepen并移除
*i
来查看console.log（），你会对它有更好的了解。我理解，但因为超时是
0
，它可以从
setTimeout
块中排除，也可以从…中包含的后续块中排除。您可以使用
i+1
或增加i，从1开始，对吗？
    for (let i = 0; i < 4; i++) {
        setTimeout(function () {
            tmp[i] = "green";
            this.setState({
                colors: tmp
            });
        }.bind(this), 2000 * (i + 1));
    }