undefined is not a function in React Native

Question

I'm trying to make an API call in React Native to handle user authentication. I'm passing this.state.email and this.state.password (both bound to text inputs) to a function in my services/ folder, where the call is made. Afterwards, the screen should navigate to the home stack or return an error. This is my login screen code:

import AuthService from ...

export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.login = this.login.bind(this);
        this.state = {
            email: '',
            password: '',
        };
    }

    login() {
        AuthService.login(this.state.email, this.state.password)
            .then(this.props.navigation.navigate('Main')) //Move to home screen
            .catch(console.error('Error')); //Handle error
    }

    render() {
        return (
            <View>
                <TextInput
                    onChangeText={email => this.setState({ email })}
                    value={this.state.email}
                />
                <TextInput
                    onChangeText={password => this.setState({ password })}
                    value={this.state.password}
                />
                <TouchableOpacity onPress={this.login}>
                    <Text style={styles.text}>Submit</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

And this is my AuthService function:

login(email, password) {
        // Check if credentials exist
        if (!email || !password) {
            return undefined;
        }

        return fetch(
            `${AUTH_ROOT}/login`,
            {
                method: 'POST',
                body: { email, password },
            }
            .then(
                res => {
                    const data = { ...res.data };
                    if (!data) {
                        throw new Error('No user returned from auth service');
                    }
                },
                res => {
                    context.error = 'Could not login';
                    console.log(res);
                }
            )
        );
    },

But I'm getting the error:

> undefined is not a function (near '...{
>     method: 'POST',
>     body: {
>         email: email,
>         password: password,
>     } }.then...')

What does this mean? Is my call not done correctly?

How are are you importing fetch

ehab
– ehab

2019-07-02 16:41:07 +00:00
Commented Jul 2, 2019 at 16:41 — ehab
– ehab, Commented Jul 2, 2019 at 16:41

silentw · Accepted Answer · 2019-07-02 16:46:25Z

1

login(email, password) {
        // Check if credentials exist
        if (!email || !password) {
            return undefined;
        }

        return fetch(
            `${AUTH_ROOT}/login`,
            {
                method: 'POST',
                body: { email, password },
            }
        )
            .then(
                res => {
                    const data = { ...res.data };
                    if (!data) {
                        throw new Error('No user returned from auth service');
                    }
                },
                res => {
                    context.error = 'Could not login';
                    console.log(res);
                }
            )
    },

The right syntax for fetch is

fetch(url, params).then()

instead you had

fetch(url, params.then())

answered Jul 2, 2019 at 16:46

silentw

4,8854 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam.V Over a year ago

It looks like that fixed the console error, but the functionality is a bit odd - When I login with incorrect details, it both throws an error and moves to the home screen (instead of just throwing error). Why is this?

Collectives™ on Stack Overflow

undefined is not a function in React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related