reactjs - 如何在反应js中正确重置计时器

Question

考虑以下组件：

import React from 'react';

export default class HeartBeat extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      timeRemaining: 15 * 60,
      timeBeforeWarning: (15 * 60) - 300,
      showWarning: false,
      showError: false,
    };

    this.currentTick = 0;
    this.intervalId  = null;
  }

  componentDidMount() {
    this.intervalId = setInterval(this.updateTick.bind(this), 6000)
  }

  updateTick() {
    if (this.currentTick < 600) {
      this.currentTick += 60;
    } else if (this.currentTick > 540 && this.currentTick < 900) {
      if (!this.state.showWarning) {
        this.setState({
          showWarning: true,
        });
      }

      this.currentTick += 60;
    } else if (this.currentTick === 900) {
      this.setState({
        showWarning: false,
        showError: true,
      });

      clearInterval(this.intervalId);
    }

    console.log(this.currentTick);
  }

  resetTimmer() {
    this.intervalId = 0;

    this.setState({
      showWarning: false,
    });
  }

  render() {
    if (this.state.showWarning) {
      return (
        <div className="alert alert-warning">Your session is about to expire in 5 minutes <a href="#" onClick={this.resetTimmer.bind(this)}>Click me to stay logged in</a></div>
      )
    }

    if (this.state.showError) {
      return (
        <div className="alert alert-danger">Your session expired.</div>
      )
    }

    return null;
  }
}

这里的想法很简单：每 6 秒增加currentTick60。如果该值大于 540 但小于 900，则显示警告。如果是 900，则显示错误。如果他们单击警告中的链接，则应重置计时器，我们应该重新开始。

问题：

• 我this.intervalId = 0在 onClick 函数中做，它不起作用。因为它只是不断增加现有值。我确实尝试clearInterval(this.intervalId)过，但这完全停止了计时器。我只想重置计时器。
  • 我想停止计时器的唯一时间是他们的会话是否真的超时。
• 警告似乎仅在currentTick660 时显示，这不是假设发生的情况。不知道如何解决。

目标：

当警告显示时，我们对服务器进行 ajax 调用以基本上 ping 它以保持会话处于活动状态（我使用 Laravel 作为后端）当成功返回 200 时，我们重置计时器。（我知道如何进行 ajax 调用，现在我将它作为一个简单的事件处理程序来“重置计时器”）

注意：我已将计时器设置为，setInterval(this.updateTick.bind(this), 6000)而不是60000出于测试目的。一旦我知道这可行，它将设置为 60000。

有人可以告诉我如何重置计时器以使其重新开始，以及我是否已将计时器的逻辑放置在正确的位置？

标签： reactjs

Answer 1

这是一个基本间隔，每分钟更新一次状态：

import React from 'react'

class Counter extends React.Component{
    state = {
        timer:  0
    }

    tick = null

    onTick = () => this.setState({timer : this.state.timer + 60})

    componentDidMount(){
        this.tick = setInterval(this.onTick, 60000)
    }

    componentWillUnmount(){
        clearInterval(this.tick)
    }

    render(){
        const { timer} = this.state
        return(
            <div>
                {(timer > 540 && timer <900) && 'Warning'}
                {timer > 900 && 'Error'}
            </div>
        )
    }
}