React - 將 class 組件轉換為 session 的功能組件

Question

在反應應用程序中，我試圖通過引用https://medium.com/tinyso/how-to-detect-inactive-user-to-auto-logout-by-using-idle為非活動用戶（會話）進行自動注銷-timeout-in-javascript-react-angular-and-b6279663acf2

現在，如果我嘗試將 class 組件的代碼更改為功能代碼，它將無法像以前那樣工作。

Class 組件代碼將從https://codesandbox.io/s/suspicious-dream-w1cyc?from-embed獲取

Function 組件代碼如下

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

應用程序.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()的功能組件。

Answer 1

使用您在 function 下方發送的來自代碼框的應用程序按預期工作。

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;