CODEWITHSUNDEEP
javascriptreactjsreact-native
Lucas Marques
Lucas Marques

Reputation: 35

Warning: Cannot update a component from inside the function body of a different component. (React Native)

I'm new on react native and javascript. was trying to use a auth flows, on a init page, to see if the user isLoggedIn and then redirect them to respective page. The message show when the user is logged, and he navigate to the other page.

error message, screenshot

Here is the code used on Auth page.

    import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import styles from './styles';

import { isSignedIn, getUserType } from '../../services/auth';

export default function(){

    const navigation = useNavigation()

    async function goToLoginOng(){
        navigation.navigate('Login', {
            userType: 'ong',
            route: 'sessions'
        })
    }
    async function goToLoginUser(){
        navigation.navigate('Login', {
            userType: 'user',
            route: 'userlogin'
        })
    }

    async function userisLogged() {
        if (isSignedIn){
            const userType = getUserType();
            if (userType === 'user'){
                navigation.navigate('Incidents')
            }
            else {
                navigation.navigate('Profile')
            }
        }
    }

    userisLogged();

    return(
        <View style={styles.container}>
            <Text style={styles.bigQuestion} >Quem é você?</Text>
            <TouchableOpacity style={styles.box} onPress={goToLoginUser}>
                <FontAwesome5 name='user' size={60} color='#FFF' style={styles.iconStyle} />
                <Text style={styles.title}>Pessoa</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.box} onPress={goToLoginOng}>
                <FontAwesome5 name='users' size={60} color='#FFF' style={styles.iconStyle} />
                <Text style={styles.title}>ONG</Text>
            </TouchableOpacity>
        </View>
    )
}

and here the auth functions that i used.

    import React from 'react';
import { AsyncStorage } from 'react-native';

export const isSignedIn = async() => {
    const response =  await AsyncStorage.getItem('userToken')
    if (response !== null){
        return true
    }
    else {
        return false
    }
}

export const getUserType = async () => {
    const response =  await AsyncStorage.getItem('userType')
    return response;
}

Said this, if you can suggest ways to improve this, or another best way to do it i would thanks in advance.

Upvotes: 1

Views: 588

Answers (1)

ecoplaneteer
ecoplaneteer

Reputation: 1984

I think the problem is that userisLogged() is triggered directly inside functional component.

This means userisLogged() is triggered whenever this Auth page is rendered.

So this function is triggered once when the page initially rendered.

This can be implemented by using useEffect hook.

useEffect(() => {
   userisLogged()
}, [])

Above code is equal to componentDidMount() in class component.

Upvotes: 1

Related Questions