Javascript 在React中的clearInterval之后重新启动setInterval

在我正在构建的这个游戏中，我在用户输后清除setInterval。当他们再次点击播放？我希望计时器再次启动，但在使用React时，我很难实现这一点。我尝试过几种方法，比如将计时器分离成它自己的组件，制作一个助手函数，以及使用生命周期方法，但我似乎无法得到这部分。我可以很好地启动和清除设置间隔，但它正在重新启动，这是我的问题

import React, {Component} from 'react';
// helper function to set a random action
function setRandomAction() {
    let actions = ['bop it', 'pull it', 'twist it'];
    let rando = actions[Math.floor(Math.random() * actions.length)];
    return rando;
}
class BopIt extends Component {
    constructor(props) {
        super(props);
        // set initial action in this.state so it is not empty on pageload
        this.state = {
            action: setRandomAction(),
            countdown: 3,
            userPressed: '',
            play: true
        }
        this.bind = this.keyPressed.bind(this);
        this.bind = this.keepPlaying.bind(this);
        this.bind = this.timer.bind(this);
        this.bind = this.startTimer.bind(this);
        this.bind = this.endGame.bind(this);
        this.quitGame = this.quitGame.bind(this);
        this.playAgain = this.playAgain.bind(this);
    }
    componentDidMount() {
        this.keyPressed();
        this.startTimer();
    }
    startTimer() {
        let setTimerTime = parseInt(`${this.state.countdown - 2}000`);
        this.stopIntervalId = setInterval(() => this.timer(), setTimerTime);
    }
    componentWillUnmount() {
        this.startTimer();
        this.keyPressed();
        this.keepPlaying();
        this.endGame();
    }

    timer() {
        var count = this.state.countdown;
        if (count === 0) {
            count = 4
        }
        this.setState({countdown: count - 1});
    }
    keyPressed() {
        document.addEventListener('keyup', (e) => {
            if (e.key === 'ArrowLeft') {
                this.setState({
                    userPressed: 'pull it'
                });
            } else if (e.key === 'ArrowDown') {
                this.setState({
                    userPressed: 'bop it'
                });
            } else if (e.key === 'ArrowRight') {
                this.setState({
                    userPressed: 'twist it'
                });
            } else {
                // this.endGame();
                this.setState({
                    userPressed: 'wrong'
                });
            }
            if (this.state.userPressed !== this.state.action) {
                this.endGame();
            } else {
                this.keepPlaying();
            }
        });
    }
    keepPlaying() {
        let actions = ['bop it', 'pull it', 'twist it'];
        let rando = actions[Math.floor(Math.random() * actions.length)];
        this.setState({
            action: rando,
            userPressed: ''
        });
    }
    endGame() {
        console.log('You Lost!!!');
        this.setState({
            play: false
        });
    }
    quitGame() {
        clearInterval(this.stopIntervalId);
    }
    playAgain() {
        this.setState({
            play: true,
            action: setRandomAction(),
            countdown: 3
        });
    }
    render() {
        // if (this.state.countdown <= 0) {
        //   this.endGame();
        // }
        console.log(this.state)
        let gameAction = `${this.state.action} ${this.state.countdown}`;
        return (
          <div className="bop-it">
            <div className="show-action">
            {this.state.play ?  gameAction : <ResetGame playAgain={this.playAgain} quitGame={this.quitGame}/> }
            </div>
            <span>Pull It</span>
              <br/>
            <span>Bop It</span>
              <br/>
            <span>Twist It</span>
          </div>
        );
    }
}
class ResetGame extends Component {
    render() {
        return (
          <div>
            <input type="button" value="Play Again?" onClick={this.props.playAgain}/>
            <input type="button" value="Quit Game?" onClick={this.props.quitGame}/>
          </div>
        );
    }
}
export default BopIt

---

我认为问题可能是您同时设置了两个计时器，一个在

componentWillUnmount

中，另一个在

componentWillMount

中，当您删除它们时，您只会删除其中一个，因为另一个会因变量覆盖而丢失

我会在你的代码上改变以下方法，这样创建重复的计时器就有点困难了，这样它也会在再次播放后再次触发计时器

startTimer() {
    let setTimerTime = parseInt(`${this.state.countdown - 2}000`);
    if (!this.stopIntervalId) {
        this.stopIntervalId = setInterval(() => this.timer(), setTimerTime);
    }
}
quitGame() {
    clearInterval(this.stopIntervalId);
    this.stopIntervalId = undefined;
}
playAgain() {
    this.setState({
        play: true,
        action: setRandomAction(),
        countdown: 3
    });
    this.startTimer()
}

---

我明白你的意思，那肯定是个问题。我还没有找到任何好的例子来解释React的生命周期方法（这对我来说是有意义的），所以知道如何使用

componentWillUnmount

和

componentWillMount

仍然是我的头绪。你可以看到我在上面的编辑，了解我是如何解决这个问题的。我在最初的回答中也添加了对

playtimer

方法末尾的

startTimer（）

的调用（我说过我在问题上添加的方法是我要修改的，因为它们缺少逻辑或信息），如果你能投我一票就好了，因为这对你也有帮助。

startTimer() {
    let setTimerTime = parseInt(`${this.state.countdown - 2}000`);
    if (!this.stopIntervalId) {
        this.stopIntervalId = setInterval(() => this.timer(), setTimerTime);
    }
}
quitGame() {
    clearInterval(this.stopIntervalId);
    this.stopIntervalId = undefined;
}
playAgain() {
    this.setState({
        play: true,
        action: setRandomAction(),
        countdown: 3
    });
    this.startTimer()
}