React JS對array.map的同步處理

Question

我是React JS的新手，從某種程度上講，javascript是我要解決的問題。 我在組件中有一個函數，該函數類似於下面的代碼，它通過一個數字數組進行迭代：

 playerSequence: function() {
        var game = this;
        this.state.game.sequence.map(function(currNum){
            console.log(currNum);
              switch(currNum){
                  case 1:
                      game.handleBlue();
                      break;
                  case 2:
                      game.handleYellow();
                      break;
                  case 3:
                      game.handleGreen();
                      break;
                  case 4:
                      game.handleRed();
                      break;

              }
          })
    },

每個函數調用都有一個setTimeout，它會等待一段時間並渲染燈，然后在this.props.wait ms之后關閉燈。 下面是一個示例：

var RedOn = React.createClass({
    mixins: [TimerMixin],
    componentDidMount: function () {
        this.setTimeout(function(){this.props.handleRed()}, this.props.wait);
    },
    handleRed: function() {
        this.props.handleRed()
    },
renderstuff
});

我想要的是每次通過map數組都要等到函數調用完成然后再繼續。 現在，它們都同時消失了。 我確信我沒有完全理解節點，反應或兩者的結合的性質。 任何幫助，將不勝感激。

Answer 1

根據React docs的說法， componentDidMount 僅在初始渲染發生后立即在客戶端（而不是在服務器上）被調用一次 。

因此，他們都將立即開火是有道理的。 另一個問題是setTimeout會在調用時立即被調用，這意味着如果您以毫秒為單位的時間傳遞給每個函數，則map只會立即調用所有這些函數，而不是順序應用它們。 如果要繼續使用map，則應聲明一個變量以存儲以前應用的時間，並將其添加到每個超時中。

var previousTime = 0; 

["foo", "bar", "baz"].map( function(e) { 
    setTimeout( function() { console.log(e); }, 1000 + previousTime); 
previousTime += 1000; });

這是我正在描述的一個簡單例子。 嘗試在控制台中運行以查看結果。 每次調用“ setTimeout”時，都會將時間添加到previousTime變量中，以便每個元素在顯示之前都要等待一秒鍾。

歸根結底，即使有React提供的所有抽象， 也要記住It'sJustJavaScript™