Question

我正在研究Pomodoro Clock项目，我想知道如何使 setInterval 方法起作用。

我有一个类似这样的代码：

class Pomodoro extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 25,
        };

        this.handleStartStop = this.handleStartStop.bind(this);
    }

    handleStartStop() {
        let counter = setInterval(timer, 1000);
        this.state.count *= 60;
        function timer() {
            this.setState({
                count: (this.state.count -= 1),
            });
        }
    }

    render() {
        return (
            <div>
                <div>
                    <p id="timer-label"> Session</p>
                    <p id="time-left">{this.state.count}</p>
                </div>

                <button id="start_stop" onClick={this.handleStartStop}>
                    Start/Stop
                </button>
            </div>
        );
    }
}

我想做的是，当我单击开始/停止按钮时。 {this.state.count}将减少1，但我不知道在处理事件时如何使用setInterval。

每个评论和建议都值得赞赏。

Answer 1

您可以使用箭头功能，以便在计时器回调中使用正确的this：

handleStartStop() {
    if (this.timer) {
        this.timer = clearInterval(this.timer);
        return null;
    }

    this.timer = setInterval(() => this.setState(prevState => 
        if (prevState.count === 0) {
            this.timer = clearInterval(this.timer);
            return null;
        }

        return {
            count: prevState.count - 1,
        };
    ), 1000);
}

还要注意，基于state更新时，应始终使用setState()的版本，该版本接受第一个参数为先前状态的函数。这是因为setState()是异步的，React可能会批量调用它。因此，在调用state时，您不能依赖当前的setState()。

也不要忘记在卸载组件时清除计时器：

componentWillUnmount() {
   clearInterval(this.timer);
}

否则，您的回调将在组件已卸载后尝试更新状态，这将导致难看的警告。

如何在React中使用setInterval方法来处理React中的事件？

1 个答案: