Проблема утечки памяти при использовании withNavigationFocus в React Native - PullRequest
Новая
       21

Проблема утечки памяти при использовании withNavigationFocus в React Native

0 голосов
/ 04 октября 2019

У меня есть прослушиватель, настроенный с помощью 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)

1 Ответ

2 голосов
/ 04 октября 2019

После настройки прослушивателя событий мы также должны прекратить прослушивать событие, когда экран отключен. У вас есть функциональный компонент, и вы можете подписаться и отписаться, используя hook. Как то так: 

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

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