Предупреждение при переключении на другой экран, если у пользователя есть авторизация

Question

Когда я открываю приложение и если переменная isAuth имеет значение true, это означает, что у пользователя есть авторизация, тогда я хочу go на экране провайдера.

Мой компонент авторизации.

export const LoginScreen: NavigationStackScreenComponent<NavigationParams> = observer(({ navigation }: NavigationParams) => {
    useEffect(() => {
        AuthState.checkAuthentication();
    }, []);

    if (AuthState.isAuth) {
        navigation.navigate('Provider');
    }

    return <View style={styles.body}>{LoaderState.loading ? <LoaderComponent /> : <AuthComponent />}</View>;
});

Мой компонент провайдера.

export const ProvidersScreen: NavigationStackScreenComponent<NavigationParams> = observer(({ navigation }: NavigationParams) => {
    useEffect(() => {
        ProvidersState.setProviders();
    }, []);

    return (
        <View style={styles.body}>
            {LoaderState.loading ? (
                <LoaderComponent />
            ) : (
                <ItemListComponent itemsList={ProvidersState.providersList} />
            )}
        </View>
    );
});

Но я получаю предупреждение. Я понимаю, что это связано с библиотекой react-navigation.

Как перейти на другой экран с помощью условного оператора?

Answer 1

Функциональные компоненты в основном эквивалентны функции render() в компонентах класса. Вы вызываете navigate до того, как компонент будет отрендерен, и это проблема.

Вы можете либо вызвать navigate внутри вашего useEffect, либо поместить условный лог c в родительское представление.

В первом случае navigate будет называться ПОСЛЕ того, как компонент отобразит

useEffect(() => {
    AuthState.checkAuthentication();
    if (AuthState.isAuth) {
        navigation.navigate('Provider');
    }
}, []);

, поэтому он будет виден в течение полсекунды, а затем изменится. Если вы хотите избежать этого, то go для второго варианта.

Вы можете поместить условие в родительский. Что-то вроде

<View>{AuthState.isAuth ? <ProvidersScreen /> : <LoginScreen />}</View>