React Native中使用withNavigationFocus的内存泄漏问题

Question

我有一个使用withNavigationFocus设置的侦听器，因此，每次用户到达屏幕或离开屏幕时，都会触发某个事件。但是，出现以下错误：

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消所有订阅和异步任务

const PleaseSignIn = props => {
    const {
        state: { authOpen },
        authModal
    } = useContext(Context)

    const focusListener = props.navigation.addListener('didFocus', () => {
        retrieveToken()     
    })

    const retrieveToken = async () => {
        try {
            const token = await AsyncStorage.getItem(LOGIN_TOKEN)
            if(!token) {
                authModal()
            }
        } catch (err) {
            throw new Error(err)
        }
    }

    if(!authOpen) {
        return (
            <View style={styles.container}> 
                <Auth navigation={props.navigation} />
                <Signup navigation={props.navigation}  />
                <Signin navigation={props.navigation} />
            </View>
        )
    }
    return props.children
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

export default withNavigationFocus(PleaseSignIn)

Answer 1

设置事件监听器后，我们还必须在卸载屏幕时停止监听事件。您具有功能组件，可以使用钩子进行订阅和退订。像这样的东西：

 useEffect(() => {
 const focusListener = 
 props.navigation.addListener('didFocus', async() => {
      await retrieveToken();     
      });

   // returned function will be called on component 
    //unmount 
   return () => {
    focusListener.remove();
   }
   }, []);