React update a 属性 in setInterval 工作两次

Question

简而言之：为什么在setInterval中，更新一个应该更新一次的变量，它更新了两次？

compTurn() {
      let intervalId = setInterval(()=> {
        if (this.flash==this.round) {
          clearInterval(intervalId);
        }
        if (this.seq[this.flash]==1){
          this.greenFlash();
        }
        if (this.seq[this.flash]==2){
          this.yellowFlash();
        }
        if (this.seq[this.flash]==3){
          this.blueFlash();
        }
        if (this.seq[this.flash]==4){
          this.redFlash();
        }
        this.flash++;
      }
      , 1500);  
    }

我的第一个小游戏应用程序包含的按钮会根据给定的顺序在某些情况下改变颜色。这发生在 compTurn 方法中。每次更改颜色时，闪光计数器都会增加。游戏从 round=1 开始，应该随着玩家 'ok' 的增长而增长。（代码暂时不全）例如在第 1 轮中，一个按钮闪烁（改变颜色）然后闪烁变大，然后间隔应该结束。

但是在setInterval中，在compTurn中，flash更新了两次（在第1轮中，flash转了2次）。

需要一些帮助。

已编辑：另外，当会话完成时，当我再次按下开始按钮时 - 没有任何反应（按下不会再次启动 play()。我怎样才能做到这一点？（我希望用户再次按下开始重新启动游戏）。

我现在正在处理的完整代码在这里：

export default class App extends Component{ 
  constructor (props){
    super(props);
    this.flash=0
    this.round=1
    this.seq=[1,2,3,1,4] //will be random, this is just for testing
    this.playerSeq=[] 
    this.win=false
    this.ok=true
    this.score=0
    this.state = {
      renderView: false,
      greenB: {
        backgroundColor: 'darkgreen'
      },
      yellowB: {
        backgroundColor: 'orange'
      },
      blueB: {
        backgroundColor: 'blue'
      },
      redB: {
        backgroundColor: 'red'
      }
    }
    this.play=this.play.bind(this)
    this.greenFlash=this.greenFlash.bind(this)
    this.blueFlash=this.blueFlash.bind(this)
    this.redFlash=this.redFlash.bind(this)
  }

  play(){
    for (var i=0;i<this.round;i++){
      this.compTurn();
      //this.playerTurn();
    }
  }

  playerTurn(){
    //
  }
  compTurn() {
      let intervalId = setInterval(()=> {
        if (this.flash==this.round) {
          clearInterval(intervalId);
        }
        if (this.seq[this.flash]==1){
          this.greenFlash();
        }
        if (this.seq[this.flash]==2){
          this.yellowFlash();
        }
        if (this.seq[this.flash]==3){
          this.blueFlash();
        }
        if (this.seq[this.flash]==4){
          this.redFlash();
        }
        this.flash++;
      }
      , 1500);  
    }

  greenFlash(){
      setTimeout(() => {
        this.setState( {
            greenB:{
              ...this.state.style1, backgroundColor: 'lightgreen'
            }
            })
        }, 200);
      setTimeout(() => {
        this.setState( {
            greenB:{
              ...this.state.style1, backgroundColor: 'darkgreen'
            }
            })
        }, 1000);
    } 

  yellowFlash(){
    setTimeout(() => {
      this.setState( {
          yellowB:{
            ...this.state.style1, backgroundColor: 'yellow'
          }
          })
      }, 200);
    setTimeout(() => {
      this.setState( {
          yellowB:{
            ...this.state.style1, backgroundColor: 'orange'
          }
          })
        }, 1000);
   }

  blueFlash(){
    setTimeout(() => {
      this.setState( {
          blueB:{
            ...this.state.style1, backgroundColor: 'lightblue'
          }
          })
      }, 200);
    setTimeout(() => {
      this.setState( {
          blueB:{
            ...this.state.style1, backgroundColor: 'blue'
          }
          })
        }, 1000);
   }

  redFlash(){
    setTimeout(() => {
      this.setState( {
          redB:{
            ...this.state.style1, backgroundColor: 'pink'
          }
          })
      }, 200);
    setTimeout(() => {
      this.setState( {
          redB:{
            ...this.state.style1, backgroundColor: 'red'
          }
          })
        }, 1000);
   }

  render(){
    return (
      <View>
        <TouchableOpacity style={styles.playB}
        onPress={this.play}> 
        <Text style={{
          color:'white',
          height: 30,
          width:60,
          }}>START</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.greenB, this.state.greenB]}></TouchableOpacity>
        <TouchableOpacity style={[styles.yellowB, this.state.yellowB]}></TouchableOpacity>
        <TouchableOpacity style={[styles.blueB, this.state.blueB]}></TouchableOpacity>
        <TouchableOpacity style={[styles.redB, this.state.redB]}></TouchableOpacity>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  greenB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
  },
  yellowB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
  },
  blueB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
  },
  redB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
  },
  playB:{
    alignSelf: 'center',
    backgroundColor: 'blue',
  }

});

Answer 1

初始flash值为0，所以当flash值为0和1时调用函数，就是这个问题。如果你想让flash值为1，你应该在clearInterval(intervalId);

之后return

在this.flash为1的情况下，clearInterval和运行后面的脚本和它，所以变成2.

compTurn() {
      let intervalId = setInterval(()=> {
        if (this.flash==this.round) {
          clearInterval(intervalId);
        }
        if (this.seq[this.flash]==1){
          this.greenFlash();
        }
        if (this.seq[this.flash]==2){
          this.yellowFlash();
        }
        if (this.seq[this.flash]==3){
          this.blueFlash();
        }
        if (this.seq[this.flash]==4){
          this.redFlash();
        }
        this.flash++;
      }
      , 1500);  
    }
    ```

React update a 属性 in setInterval 工作两次

React update a property in setInterval works twice

javascript

setinterval

reactjs

react-native

react-native-android