Question

我正在开发一个React应用，我想管理用户的非活动状态。

为此，我定义了一个倒计时，如果用户在App中执行某项操作，则应该将其重置为原始值。

显示的组件由Layout组件渲染/包围。

我的问题是，由于在其中使用了.setState函数，因此在每次用户操作之后，布局都会更新两次。因此，InactivityManager组件也被更新两次，并且setInterval同时执行两次。

我编写了一个简单的InactivityManager组件，该组件不呈现任何内容，而是在布局中呈现。

以下是组件：

import { Component } from 'react';
import { isLogged, logout } from '...';


class InactivityManager extends Component {


  constructor(props) {
    super(props);
    this.refreshRemainingTime = this.refreshRemainingTime.bind(this);
  }

  componentDidUpdate() {
    if (isLogged()) {
      clearInterval(this.refreshRemainingTime);
      localStorage.setItem('activityCountdown', '900');
      window.setInterval(this.refreshRemainingTime, 5000);
    }
  }

  refreshRemainingTime = () => {
    let activityCountdown = parseInt(localStorage.getItem('activityCountdown'), 10);
    activityCountdown -= 60;
    localStorage.setItem('activityCountdown', activityCountdown);
    if (activityCountdown <= 0) {
      logout();
      localStorage.removeItem('activityCountdown');      
    }
  };

  render() {

    return null;
  }
}

export default InactivityManager;

任何关于最佳方法的想法是什么？还尝试将组件包含在App.js中，但该组件只希望有一个“ Route”子级。

谢谢！

Answer 1

可以稍微修改componentDidUpdate方法吗？

componentDidUpdate() {
    if (isLogged()) {
      if (this.interval) clearInterval(this.interval);
      localStorage.setItem('activityCountdown', '900');
      this.interval = setInterval(this.refreshRemainingTime, 5000);
    }
  }

Answer 2

我最终更喜欢使用setTimeout而不是setInterval，这不再有问题。

谢谢！

如何在触发componentDidUpdate 2次时触发一次setInterval函数

2 个答案: