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

在react应用程序中，我试图通过引用

现在，若我尝试将类组件的代码更改为函数代码，它将不会像以前一样工作

类组件代码将从

功能部件代码如下所示

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

---

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

带有您在下面发送的codesandbox中的应用程序，该功能按预期工作

const IdleTimerFun={timeout，onTimeout，onExpired}=>{ 让timeoutTracker=null； 设区间=null； const expiredTime=parseIntlocalStorage.getItem\u expiredTime，10； 如果expiredTime>0&&expiredTime{ updateExpiredTime； 间隔=设置间隔=>{ const expiredTime=parseIntlocalStorage.getItem\u expiredTime，10； 如果expiredTime{ 如果超时跟踪器{ ClearTimeOutTracker； } timeoutTracker=setTimeout=>{ localStorage.setItem_expiredTime，Date.now+超时*1000； }, 300; }; 常数跟踪器==>{ window.addEventListenermousemove，updateExpiredTime； window.addEventListenerscroll，updateExpiredTime； window.addEventListenerkeydown，updateExpiredTime； }; 常量清理==>{ localStorage.removietem\u过期时间； 清晰间隔； window.removeEventListenermousemove，updateExpiredTime； window.removeEventListenerscroll，updateExpiredTime； window.removeEventListenerkeydown，updateExpiredTime； }; 跟踪器； startInterval； }; 导出默认IdleTimerFun；

---

您需要使用useEffect来启动计时器的副作用，并在卸载此组件时清理任何活动侦听器。这个问题到底是什么？目前，问题是isTimeout没有更新。另外，如果我尝试使用useEffect，应用程序中的其他功能将无法工作，因为在setInterval.isTimeout下每秒都会触发的事件正在您的codesandbox中工作，所以我不清楚您存在的问题。在10秒不活动后，除了切换外，是否还应该发生其他情况？您指的是其他哪些功能？我不理解你其余的评论。在codesandbox中，一切都在工作，但当我转换为功能组件时，它将不工作。不过，将什么转换为功能组件？在您的沙箱中，应用程序已经是一个功能组件。您正在尝试将IdleTimer类转换为React组件吗？IdleTimer不是React组件。

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()
}