Question

我试图在React中制作一个simonSays游戏，但无法弄清楚如何使用componentDidMound（）设置间隔。任何建议或指导将不胜感激

// Play specific step
playStep(step) {
    this.setState({ clickClass: "button hover" });
    this.sounds[step].play();
    setTimeout(function(){
        this.setState({ clickClass: "button" });
    }, 300);
}

// Show all steps
showSteps() {
    this.setState({ gameConsole: this.state.round });
    let num = 0;
    let moves = setInterval(function(){
        this.playStep(this.state.steps[num]);
        this.setState({ gameConsole: "Wait..." });
        num++;
        if (num >= this.state.steps.length) {
            this.setState({ gameConsole: "Repeat the steps!" });
            clearInterval(moves);
        }
    }, 600);
}

Answer 1

由于您在setTimeout和setInterval中使用普通函数，因此需要绑定该函数或将其更改为arrow函数，以便在函数中获得此上下文，并且setState将起作用

这是您的裁判的更新代码

   playStep(step) {
       this.setState({ clickClass: "button hover" });
       this.sounds[step].play();
       setTimeout(function(){
           this.setState({ clickClass: "button" });
       }.bind(this), 300);
   }

   // Show all steps
   showSteps() {
        this.setState({ gameConsole: this.state.round });
        let num = 0;
        let moves = setInterval(function(){
       this.playStep(this.state.steps[num]);
       this.setState({ gameConsole: "Wait..." });
       num++;
       if (num >= this.state.steps.length) {
           this.setState({ gameConsole: "Repeat the steps!" });
           clearInterval(moves);
       }
     }.bind(this), 600);
  }

另外，您在组件内部声明了几个函数，这些组件执行setState，因此您需要这些函数在构造函数中手动绑定或将其更改为箭头函数

这是更新的Codepen演示https://codepen.io/anon/pen/bOPyVy

Answer 2

this

回调函数中

未知。每当您需要访问更深层次的.bind(this)时，都使用this。例如：

let moves = setInterval(function(){
    this.playStep(this.state.steps[num]);
    this.setState({ gameConsole: "Wait..." });
    num++;
    if (num >= this.state.steps.length) {
        this.setState({ gameConsole: "Repeat the steps!" });
        clearInterval(moves);
    }
}.bind(this), 600)

如何在React中修复setInterval？

2 个答案: