Нарушение инварианта: максимальная глубина обновления превышена при использовании реагирования Navigation v5 - PullRequest
Новая
       21

Нарушение инварианта: максимальная глубина обновления превышена при использовании реагирования Navigation v5

3 голосов
/ 02 марта 2020

У меня есть экран входа, который я поместил в стек. После успешного входа в систему пользователь перенаправляется на домашний экран, который является экраном ящика. Одним из вариантов экрана ящика является выход из системы, поэтому при нажатии на него пользователь должен выйти из системы. Ниже приведен мой код для экрана выхода из системы. Я просто показываю индикатор выполнения на экране выхода из системы в пользовательском интерфейсе, но в useEffect ловушке, я вызываю следующий код 

navigation.reset({
   routes: [{name: LOGIN_SCREEN}],
});

Я также попытался вызвать вышеупомянутый метод в useLayoutEffect, но затем кнопка выхода из системы просто зависает.

Мой стек навигации выглядит следующим образом 

<Stack.Navigator>
    <Stack.Screen
      name={LOGIN_SCREEN}
      component={LoginScreen}
      options={{headerShown: false}}
    />
    <Stack.Screen
      name={HOME_STACK_SCREEN}
      component={DrawerStack}
      options={{headerShown: false}}
    />

    // ...

</Stack.Navigator>

Мой компонент ящика выглядит следующим образом 

<Drawer.Navigator
  drawerStyle={{backgroundColor: BLUE_COLOR_1}}
  drawerContentOptions={{labelStyle: {color: '#FFF'}}}
>
    <Drawer.Screen
      name={HOME_SCREEN}
      component={Home}
      options={{
        // ...
      }}
    />
    <Drawer.Screen
      name={LOGOUT_SCREEN}
      component={Logout}
      options={{
       // ...
      }}
    />

    // ...

</Drawer.Navigator>

Ниже указан мой компонент выхода из системы 

const Logout = ({navigation}) => {
    async function logout() {
        try {
            await AsyncStorage.clear();
            navigation.reset({
                index: 0,
                routes: [{name: LOGIN_SCREEN}],
            });
        } catch (e) {
            Alert.alert(e.toString());
            console.log(e.toString());
        }
    }

    useEffect(() => {
         logout();
    }, []);

    return <ProgressBar />;
};

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Я видел ваш код, если честно, он не выглядит хорошо для меня, если мы думаем о потоке аутентификации. Вот причина, почему я говорю это. Проверяйте эту ссылку шаг за шагом, вы узнаете, насколько просто вы можете правильно выполнить этот поток аутентификации. Реагирует на поток аутентификации навигации , эта проблема возникает, когда мы пытаемся перемещаться по экрану с помощью кнопки android, user can go back to login after you navigate user to home page on success login

Во-вторых, вы можете попробовать одно условие в текущем коде.

Вам необходимо проверить одно условие перед вызовом функции выхода из системы на экране 

useEffect(()=>{
 if(check if user value if still there in async storage ) {
 **Here you can excute you code for log out **
 }
}

И вместо использования действия сброса из навигации используйте popToTop , Здесь Вы можете найти ссылку, как вы можете PopToTop или использовать это 

navigation.popToTop()

Cheers !!

0 голосов
/ 02 марта 2020

Invariant Violation: Maximum update depth exceeded using react Navigation v5 происходит, когда что-то происходит в бесконечном l oop

navigation.reset({
    routes: [{name: LOGIN_SCREEN}],
});

Когда вы говорите, что поместили вышеуказанный код в useEffect, я подозреваю, что ловушка вызывается несколько раз.

...