为什么更新状态未反映在事件侦听器中:React Native,Hooks

梅尔维斯

我正在使用挂钩来更新状态。在我的代码中,我有一个AppState事件侦听器,无论何时触发,我都会使用setAppState更新appState,但是事件侦听器内部的appState并没有改变。但是该值正在侦听器外部更新。谁能解释为什么会这样?

这是我的代码:

    import React, { FunctionComponent, useEffect, useState } from "react"
    import { View, AppState, AppStateStatus } from "react-native"
    const Test: FunctionComponent<any> = (props: any) => {
        const [appState, setAppState] = useState < AppStateStatus > (AppState.currentState)
    
        useEffect(() => {
            AppState.addEventListener("change", _handleAppStateChange)
        },[])
    
        const _handleAppStateChange = (nextAppState: AppStateStatus) => {
         //appState not Changing here
            console.log(appState, "app state")
            if (appState.match(/inactive|background/) && nextAppState === "active") {
                console.log("App has come to the foreground!")
                activateRealtime()
            } else if (appState === "active" && nextAppState.match(/inactive|background/)) {
                console.log("App has come to background!")
            }
            setAppState(nextAppState)
        }
       //appState updated here
       console.log(appState, "app state")
        return <View />
    }
HMR

在您的代码appState中是一个过时的关闭 lint应该告诉您您缺少依赖项。

我认为以下将起作用

const _handleAppStateChange = useCallback(
  (nextAppState) =>
    //use callback for state setter so you don't
    //  create needless dependency or (as you did)
    //  create a stale closure
    setAppState((currentAppState) => {
      //logs current appstate
      console.log(currentAppState, 'app state');
      if (
        currentAppState.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        console.log('App has come to the foreground!');
        activateRealtime();
      } else if (
        currentAppState === 'active' &&
        nextAppState.match(/inactive|background/)
      ) {
        console.log('App has come to background!');
      }
      return nextAppState;
    }),
  //only pass function as _handleAppStateChange
  //  on mount by providing empty dependency
  []
);
useEffect(() => {
  AppState.addEventListener(
    'change',
    _handleAppStateChange
  );
  //clean up code when component unmounts
  return () =>
    AppState.removeEventListener(
      'change',
      _handleAppStateChange
    );
  //_handleAppStateChange is a dependency but useCallback
  //  has empty dependency so it is only created on mount
}, [_handleAppStateChange]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用React Native Hooks

如何将事件侦听器添加到React Native中的状态

React Native - React Hooks - useState 不会立即更新我的状态

为什么此React Hooks组件内部状态未更新?

使用React Hooks进行React Native onLayout

为什么React Native Navigation侦听器在第一次尝试时触发?

React Hooks,状态未更新

React Native Hooks:无法在 useEffect 函数的 return() 中显示值

React -native 中的 Main.js 文件未反映在我的代码中

使用React Hooks进行React-Native制作setInterval声明

react native - 如何在元组数组中使用 React Hooks?

刷新页面后调用数据(React Native Hooks)

React Native Hooks 和身份验证流程

React Native - 不能在函数组件中使用 Hooks

如何从React Native的EventEmitter实例中删除侦听器?

使用 React Native 和 Hooks 时,状态不会在 Jest 测试期间更新

如何使用 React Native 中的事件侦听器和钩子检查是否按下/按住某个键?

更新 map Function React 或 React-Hooks 或 React-Native 内的数组中的对象

react native hooks 中的 pull to refresh 功能相当于什么?

带有 react-native-image-zoom-viewer 的后退按钮事件侦听器

为什么反应事件侦听器正在保存状态?

React:与事件侦听器相关的批处理状态更新

React Hooks + Firebase Firestore onSnapshot-正确使用带有React Hooks的Firestore侦听器

React Native useEffect Hooks和React Navigation setParams在加载时不会更新

使用 Hooks 在 react-native 中动态更改单选按钮中的文本

如何使用搜索栏和Redux Hooks在React Native中搜索FlatList

Usestate在文本标签中不起作用,并为我提供了相同的值React native hooks

如何获取我的Firebase侦听器以在React Native应用程序中将数据加载到Redux状态,以便可以在ComponentDidMount函数中读取数据?

如何将我自己的事件侦听器添加到我的自定义 React Native 组件中?