为什么我不能从 useEffect 回调中更新我的组件的状态？

大佬教程收集整理的这篇文章主要介绍了为什么我不能从 useEffect 回调中更新我的组件的状态？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决为什么我不能从 useEffect 回调中更新我的组件的状态？？

我正在尝试创建一个计时器，该计时器在应用程序处于后台时启动，然后当应用程序再次被调用到前台时，应用程序会检查它是否已经 15 分钟（为了便于测试，我使用了 15 秒）现在）。如果它让应用将用户注销，否则计时器会重置。

如果这是一个骗局，请转介给我 - 我只是找不到任何东西。这几天我一直在努力解决这个问题。

这是我的想法：

• 我在 useEffect 中使用 AppState.addEventListener 监听应用程序状态变化。这会在更改时触发一个回调函数，它允许我访问它已更改为的实际状态。
• 我在 setState 钩子中存储用户将应用置于后台时的 Date.Now()。
• 当应用被调用到前台时，我然后执行 Date.Now() 减去存储的状态以计算时间是否已经过去。

这是我的问题：

• 当我尝试在 useEffect 回调中使用 setState 重置计时器时，它什么也不做。我想不出我应该如何更新状态来做到这一点。我也尝试将这些调用作为对其他函数的引用，它也做同样的事情

注意事项：

• 这是在我的根应用导航器上处理的，用户已通过身份验证。很确定这无关紧要，但以防万一有人想知道。
• 我尝试过使用 redux 来做这件事，但还是同样的问题。不会执行调度状态更新。
• 我使用的是博览会管理的工作流程，因此如果您有任何替代 npm 建议，它们需要兼容。

const rootNavigator = () => {

  const dispatch = usedispatch()
  const [loginTimer,setLoginTimer] = useState(Date.Now())

  useEffect(() => {
    AppState.addEventListener('change',handleAppStateChange)

    return (() => {
      AppState.removeEventListener('change',handleAppStateChange)
    })
  },[])

  const handleAppStateChange = (state) => {

    if (state === "inactive" || state === "background") {
        setLoginTimer(Date.Now())
      }
    if (state === "active") {
      if (Date.Now() - loginTimer < 15000) {
        setLoginTimer(Date.Now())
      } else if (Date.Now() - loginTimer >= 15000) {
          dispatch(logout())
      }
    }
  }


  return (
    <SomeComponent />
    ...
  ) 

}

我几乎可以肯定这是我遇到的一个非常基本的错误，因为我对如何处理的理解还不够完善。

提前致谢。

解决方法

const rootNavigator = () => {

  const dispatch = useDispatch()
  const timer = useRef(Date.now())

  useEffect(() => {
    AppState.addEventListener('change',handleAppStateChange)

    return (() => {
      AppState.removeEventListener('change',handleAppStateChange)
    })
  },[])

  const handleAppStateChange = (state) => {
    if (state === "inactive" || state === "background") {
      timer.current = Date.now()
    }
    if (state === "active" && (Date.now() - timer.current > 15000)) {
      dispatch(logout())
    }
  }


  return (
    <SomeComponent />
    ...
  ) 

}

大佬总结

以上是大佬教程为你收集整理的为什么我不能从 useEffect 回调中更新我的组件的状态？全部内容，希望文章能够帮你解决为什么我不能从 useEffect 回调中更新我的组件的状态？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。