Как исправить setInterval в React? - PullRequest
Новая
       6

Как исправить setInterval в React?

0 голосов
/ 18 января 2019

Я пытаюсь сделать игру SimonSays в React, но не могу понять, как установить интервал с помощью componentDidMound ().Любые советы или рекомендации будут с благодарностью

https://codepen.io/oscicen/pen/rooLXY

// 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);
}

Ответы [ 2 ]

0 голосов
/ 18 января 2019 
this

не известно внутри функции обратного вызова. используйте .bind(this) каждый раз, когда вам нужен доступ к this в более глубоких областях. e.g.:

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)
0 голосов
/ 18 января 2019

Поскольку вы используете обычную функцию в setTimeout и setInterval, вам нужно связать функцию или изменить ее на функцию стрелки, чтобы получить этот контекст внутри функции, и setState будет работать

Здесь обновлен код для вашегоref 

   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, поэтому вам нужно, чтобы эти функции либо связывались вручную в конструкторе, либо меняли его на функцию стрелки

Вот обновленная демонстрация codepenhttps://codepen.io/anon/pen/bOPyVy

...