I'm new on React Native. I have the error message, that start out of nowhere. I tried to go back in my git version, before the error, and he continues.

Warning: An unhandled error was caught from submitForm(), [TypeError: undefined is not an object (evaluating '_context.t0.response.data')]

The error was in my Login Page, I'm using Formik to handleforms, and knex to handle the database. (I'm using mysql).

When i tested on insomnia, the backend was working ok.

I'll put the code below.

Login Page

import React from 'react';
import { Feather } from '@expo/vector-icons';
import { View, Image, Text, TouchableOpacity, AsyncStorage } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import api from '../../services/api';

import styles from './styles';
import logoImg from '../../assets/logo.png';
import heroesImg from  '../../assets/heroes.png';
import { LoginForm } from '../../ponents/LoginForm';



export default function Login({route, navigat}){


    const navigation = useNavigation();

    function navigateToRegister(){
        navigation.navigate('Register', route.params);
    }

    function navigateBack(){
        navigation.goBack();
    }

    async function handleLogin(values){
        const { email, password } = values;
        try {
            const rota = route.params.route;
            const response = await api.post(rota, { email, password });

            if (route.params.userType === 'ong'){
                const {ong, token} = response.data;

                await AsyncStorage.multiSet([
                    ['userToken', token],
                    ['userName', ong.name],
                    ['userId', ong.id],
                    ['userType', route.params.userType]
                ])
    
                navigation.navigate('Profile')
            }
            else {
                if (route.params.userType === 'user'){
                    const {user, token} = response.data;

                    await AsyncStorage.multiSet([
                        ['userToken', token],
                        ['userName', user.name],
                        ['userId', user.id],
                        ['userType', route.params.userType]
                    ])
        
                    navigation.navigate('Incidents')
                }
                else {
                    throw new Error ('Falha');
                }
            }

        } catch(err){
            alert(`Falha no Login ${err.response.data.error}`)
        }
        


    }


    return(
        <View style={styles.container}>
            <View style={styles.header}> 
                <Image source={logoImg} />
                <TouchableOpacity 
                    onPress={navigateBack}>
                <Feather name='arrow-left' size={16} color='#e02041' />
                </TouchableOpacity>
            </View>

            <LoginForm onSubmit={handleLogin} />


            <Image
                source={heroesImg}
                style={styles.imageBackground} />

            <TouchableOpacity
                style={styles.button}
                onPress={navigateToRegister}>

                <Text style={styles.buttonText}> Crie sua Conta</Text>
            </TouchableOpacity>

        </View>
    );
}

The Form

import React from 'react';
import { Formik, ErrorMessage } from 'formik';
import styled from 'styled-ponents/native';
import * as Yup from 'yup';

export const LoginForm = props => (
    <Formik
    initialValues={{
        email: '',
        password: '' }}
    onSubmit={(values) => props.onSubmit(values)}
    validationSchema ={ 
        Yup.object().shape({
            email: Yup.string().email('Email invalido').required('Email is required!'),
            password: Yup.string().required('Password is required!')
    })}

    >
    {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
    <View> 
        <Title>Login</Title>
        
        <Input
        textContentType= 'emailAddress'
        placeholder= 'Email'
        onChangeText={handleChange('email')}
        onBlur={handleBlur('email')}
        value={values.email}
        />
        <ErrorMessage ponent={ErrMessage} name='email' />

        <Input
        placeholder = 'Password'
        secureTextEntry= {true}
        textContentType = 'password'
        onChangeText={handleChange('password')}
        onBlur={handleBlur('password')}
        value={values.password}
        />
        <ErrorMessage ponent={ErrMessage} name='password' />
        <Button onPress={handleSubmit}>
            <ButtonText>Entrar</ButtonText>
        </Button>

    </View>

    )}
    </Formik>
);

Sorry about the english.

I'm new on React Native. I have the error message, that start out of nowhere. I tried to go back in my git version, before the error, and he continues.

Warning: An unhandled error was caught from submitForm(), [TypeError: undefined is not an object (evaluating '_context.t0.response.data')]

The error was in my Login Page, I'm using Formik to handleforms, and knex to handle the database. (I'm using mysql).

When i tested on insomnia, the backend was working ok.

I'll put the code below.

Login Page

import React from 'react';
import { Feather } from '@expo/vector-icons';
import { View, Image, Text, TouchableOpacity, AsyncStorage } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import api from '../../services/api';

import styles from './styles';
import logoImg from '../../assets/logo.png';
import heroesImg from  '../../assets/heroes.png';
import { LoginForm } from '../../ponents/LoginForm';



export default function Login({route, navigat}){


    const navigation = useNavigation();

    function navigateToRegister(){
        navigation.navigate('Register', route.params);
    }

    function navigateBack(){
        navigation.goBack();
    }

    async function handleLogin(values){
        const { email, password } = values;
        try {
            const rota = route.params.route;
            const response = await api.post(rota, { email, password });

            if (route.params.userType === 'ong'){
                const {ong, token} = response.data;

                await AsyncStorage.multiSet([
                    ['userToken', token],
                    ['userName', ong.name],
                    ['userId', ong.id],
                    ['userType', route.params.userType]
                ])
    
                navigation.navigate('Profile')
            }
            else {
                if (route.params.userType === 'user'){
                    const {user, token} = response.data;

                    await AsyncStorage.multiSet([
                        ['userToken', token],
                        ['userName', user.name],
                        ['userId', user.id],
                        ['userType', route.params.userType]
                    ])
        
                    navigation.navigate('Incidents')
                }
                else {
                    throw new Error ('Falha');
                }
            }

        } catch(err){
            alert(`Falha no Login ${err.response.data.error}`)
        }
        


    }


    return(
        <View style={styles.container}>
            <View style={styles.header}> 
                <Image source={logoImg} />
                <TouchableOpacity 
                    onPress={navigateBack}>
                <Feather name='arrow-left' size={16} color='#e02041' />
                </TouchableOpacity>
            </View>

            <LoginForm onSubmit={handleLogin} />


            <Image
                source={heroesImg}
                style={styles.imageBackground} />

            <TouchableOpacity
                style={styles.button}
                onPress={navigateToRegister}>

                <Text style={styles.buttonText}> Crie sua Conta</Text>
            </TouchableOpacity>

        </View>
    );
}

The Form

import React from 'react';
import { Formik, ErrorMessage } from 'formik';
import styled from 'styled-ponents/native';
import * as Yup from 'yup';

export const LoginForm = props => (
    <Formik
    initialValues={{
        email: '',
        password: '' }}
    onSubmit={(values) => props.onSubmit(values)}
    validationSchema ={ 
        Yup.object().shape({
            email: Yup.string().email('Email invalido').required('Email is required!'),
            password: Yup.string().required('Password is required!')
    })}

    >
    {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
    <View> 
        <Title>Login</Title>
        
        <Input
        textContentType= 'emailAddress'
        placeholder= 'Email'
        onChangeText={handleChange('email')}
        onBlur={handleBlur('email')}
        value={values.email}
        />
        <ErrorMessage ponent={ErrMessage} name='email' />

        <Input
        placeholder = 'Password'
        secureTextEntry= {true}
        textContentType = 'password'
        onChangeText={handleChange('password')}
        onBlur={handleBlur('password')}
        value={values.password}
        />
        <ErrorMessage ponent={ErrMessage} name='password' />
        <Button onPress={handleSubmit}>
            <ButtonText>Entrar</ButtonText>
        </Button>

    </View>

    )}
    </Formik>
);

Sorry about the english.

• javascript
• react-native
• formik

Share Improve this question Follow asked Oct 25, 2020 at 16:38 Lucas MarquesLucas Marques 3511 gold badge11 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You are using 'ong' when you destruct your response object

const {ong, token} = response.data;

But this doenst have a ong property so you should use the user property like below

const {user, token} = response.data;

These lines should change too

  await AsyncStorage.multiSet([
                    ['userToken', token],
                    ['userName', user.name],
                    ['userId', user.id],
                    ['userType', route.params.userType]
                ])

Also better check whether response.data is not null, and handle it properly