undefined is not a function in React Native

Viewed 705

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?

1 Answers

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())
Related