React - 将类组件转换为会话的功能组件答案

【问题标题】：React - Convert class component to functional component for sessionReact - 将类组件转换为会话的功能组件
【发布时间】：2021-06-13 11:38:49
【问题描述】：

在反应应用程序中，我试图通过引用 https://medium.com/tinyso/how-to-detect-inactive-user-to-auto-logout-by-using-idle-timeout-in-javascript-react-angular-and-b6279663acf2 为非活动用户（会话）自动注销

现在如果我尝试将类组件的代码更改为功能代码，它将无法像以前那样工作。

类组件代码将从https://codesandbox.io/s/suspicious-dream-w1cyc?from-embed获取

功能组件代码如下

index.js

const IdleTimer = ({ timeout, onTimeout, onExpired }) => {
  const expiredTime = parseInt(localStorage.getItem('_expiredTime'), 10)
  if (expiredTime > 0 && expiredTime < Date.now()) {
    onExpired()
    return
  }
  let timeoutTracker = null

  const interval = () => {
    setInterval(() => {
      if (expiredTime < Date.now()) {
        if (onTimeout) {
          onTimeout()
          cleanUp()
        }
      }
    }, 1000)
  }

  const updateExpiredTime = (e) => {
    if (timeoutTracker) {
      clearTimeout(timeoutTracker)
    }
    timeoutTracker = setTimeout(() => {
      localStorage.setItem('_expiredTime', Date.now() + timeout * 1000)
    }, 300)
  }

  const startInterval = () => {
    updateExpiredTime()
    interval()
  }

  const tracker = () => {
    window.addEventListener('mousemove', updateExpiredTime)
    window.addEventListener('scroll', updateExpiredTime)
    window.addEventListener('keydown', updateExpiredTime)
  }

  tracker()
  startInterval()

  const cleanUp = () => {
    localStorage.removeItem('_expiredTime')
    clearInterval(interval)
    window.removeEventListener('mousemove', updateExpiredTime)
    window.removeEventListener('scroll', updateExpiredTime)
    window.removeEventListener('keydown', updateExpiredTime)
  }
}
export default IdleTimer

app.js，

const [isTimeout, setIsTimeout] = useState(false)

useEffect(() => {
  const timer = IdleTimer({
    timeout: 20, //expire after 20 seconds
    onTimeout: () => {
      setIsTimeout(true)
    },
    onExpired: () => {
      setIsTimeout(true)
    },
  })

  return () => {
    timer.cleanUp()
  }
}, [])

if (isAuthenticated && isTimeout) {
  logout()
}

请帮我解决这个问题。我想要没有useEffect() 的功能组件。

【问题讨论】：

您需要useEffect 来启动计时器的副作用并在此组件卸载时清除所有活动的侦听器。这个问题到底是什么？
目前，问题是isTimeout 没有更新。此外，如果我尝试使用useEffect() 其他功能（在应用程序中）将无法工作，因为events 将在setInterval 下每秒触发一次。
isTimeout 正在您的代码和框中工作，所以我不清楚您遇到的问题。除了在 10 秒不活动后切换为真之外的其他事情应该发生吗？您指的是哪些其他功能？我不明白你的其余评论。
在代码和框中一切正常，但是当我转换为功能组件时，它就不起作用了。
将什么转换为功能组件？在您的沙箱中，App 已经是一个功能组件。您是否尝试将 IdleTimer 类转换为 React 组件？ IdleTimer 不是 React 组件。

标签： javascript reactjs session react-hooks next.js

【解决方案1】：

使用您发送的以下功能的代码和框中的应用程序按预期工作。

const IdleTimerFun = ({ timeout, onTimeout, onExpired }) => {
  let timeoutTracker = null;
  let interval = null;

  const expiredTime = parseInt(localStorage.getItem("_expiredTime"), 10);
  if (expiredTime > 0 && expiredTime < Date.now()) {
    onExpired();
    return;
  }

  const startInterval = () => {
    updateExpiredTime();

    interval = setInterval(() => {
      const expiredTime = parseInt(localStorage.getItem("_expiredTime"), 10);
      if (expiredTime < Date.now()) {
        if (onTimeout) {
          onTimeout();
          cleanUp();
        }
      }
    }, 1000);
  };

  const updateExpiredTime = () => {
    if (timeoutTracker) {
      clearTimeout(timeoutTracker);
    }
    timeoutTracker = setTimeout(() => {
      localStorage.setItem("_expiredTime", Date.now() + timeout * 1000);
    }, 300);
  };

  const tracker = () => {
    window.addEventListener("mousemove", updateExpiredTime);
    window.addEventListener("scroll", updateExpiredTime);
    window.addEventListener("keydown", updateExpiredTime);
  };

  const cleanUp = () => {
    localStorage.removeItem("_expiredTime");
    clearInterval(interval);
    window.removeEventListener("mousemove", updateExpiredTime);
    window.removeEventListener("scroll", updateExpiredTime);
    window.removeEventListener("keydown", updateExpiredTime);
  };

  tracker();
  startInterval();
};

export default IdleTimerFun;

【讨论】：