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™