setTimeoutを使用してsetStateを実行すると、どのように反応コンポーネントを再レンダリングできますか？

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); 
    } 
} 

しかし、再することができないようです一度に私のコンポーネントをレンダリングすると、2秒ごとにコンポーネントのアップデートがタイムラインに反映されますが、1回だけ再レンダリングします。

eventHandlerが完了した後、すべての反応プロセスがsetStates()であることがわかっています。私は落胆していないことを知っていますが、forceUpdateを使用しようとしましたが、動作しません。

コンポーネントを再レンダリングするにはどうすればよいですか？

ご協力いただければ幸いです。

---

更新アンドレ・リー@

感謝。

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

は私のドラフトでは二つの大きな変化があり、次のようにあなたのコードスニペットに基づいて草案を作成しました。

1. あなたののsetTimeoutため2000 * iを使用する必要があります。または、setIntervalを使用して後でクリアすることもできます。
2. setTimeoutのコールバック関数のの色を変更してください。