Question

我尝试编写一个每隔几秒更新一次时间轴的组件，所以我使用这样的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);
    }
}

但它似乎无法立即重新渲染我的组件，我希望我的组件每两秒更新一次时间轴，但它只是重新渲染一次。

我知道在setStates()完成后我会对所有eventHandler进行反应处理。我尝试使用forceUpdate虽然我知道它并不气馁，但它没有＃＆＃ 39;工作。

那么重新渲染我的组件的最佳方式是什么？

任何帮助都会非常感激。

更新

谢谢@ andre-lee。

    for (let i = 0; i < 4; i++) {
        setTimeout(function () {
            tmp[i] = "green";
            this.setState({
                colors: tmp
            });
        }.bind(this), 2000 * (i + 1));
    }

以上代码有效。

Answer 1

我已根据您的代码段创建了草稿，如下所示， http://codepen.io/andretw/pen/JWmYGo

我的草稿有两个重大变化。

您应该使用2000 * i作为 setTimeout 。或者您可以使用setInterval并在以后清除它。
在setTimeout中更改回调函数中的颜色。

当我使用setTimeout setState时，如何重新渲染react-component？

1 个答案: