React JS同步处理array.map

React JS synchronous handling of array.map

本文关键字：array map 处理 同步 JS React      更新时间：2023-09-26

我对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，它等待一段时间并呈现一盏灯，然后在此之后关闭灯

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

我希望每次通过map数组都等待函数调用完成，然后继续。就像现在一样，他们都同时出发了。我确信我没有完全理解节点、反应或两者的组合的性质。如有任何帮助，我们将不胜感激。

根据React文档，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提供了所有抽象，也要记住itJustJavaScript™

相关文章：