Await is only allowed within async functions error react native

Question

I am new to react native and trying to save user obejct in application storage using await AsyncStorage.setItem('user', res[1].data);
However I am getting error as

handleLogin = async() => {
        NetInfo.fetch().then(state => {
            if (state.isConnected) {

        const {navigate} = this.props.navigation;
        const data = {
            email: this.state.userName,
            password: this.state.password
        };

        fetch(`${DOMAIN_URL}/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
            .then((response) => {
                const statusCode = response.status.toString();
                const data = response.json();
                return Promise.all([statusCode, data]);
            })
            .then((res) => {

                if (res[0] == 200) {
                    await AsyncStorage.setItem('user', res[1].data);
                    navigate('Home');
                }else{
                    Alert.alert(
                        res[1].message
                    );
                }
            })
            .catch((error) => {
                console.error(error);
            });

            }
            else {
                Alert.alert(
                    "No Internet!",
                    "Needs to connect to the internet in order to work. Please connect tablet to wifi and try again.",
                    [
                        {
                            text: "OK",
                            onPress: () => { }
                        }
                    ]
                );
            };
        })
    };

I have made the handleLogin async but it doesn't solve the error. What is the correct way to store user obejct?

await is inside the callback function of .then() that arrow function is not async — Calvin Nunes
– Calvin Nunes, Commented Nov 17, 2020 at 19:43
I made a new async function called and navigateToHome and it worked. — Archit Sandesara
– Archit Sandesara, Commented Nov 17, 2020 at 19:48

rufeng · Accepted Answer · 2020-12-09 07:01:03Z

1

It is recommended that you use react-native-easy-app , through which you can access any data in AsyncStorage synchronously.

Sample_Hooks

StorageController

edited Dec 9, 2020 at 7:01

answered Nov 18, 2020 at 10:44

rufeng

1214 bronze badges

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

Comments

Archit Sandesara · Accepted Answer · 2020-11-17 19:49:57Z

   navigateToHome = async (user) => {
        const { navigate } = this.props.navigation;
        await AsyncStorage.setItem('user', user);
        navigate('Home');
    }

    handleLogin = async() => {
        NetInfo.fetch().then(state => {
            if (state.isConnected) {

      
        const data = {
            email: this.state.userName,
            password: this.state.password
        };

        fetch(`${DOMAIN_URL}/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
            .then((response) => {
                const statusCode = response.status.toString();
                const data = response.json();
                return Promise.all([statusCode, data]);
            })
            .then((res) => {

                if (res[0] == 200) {
                    navigateToHome(res[1].data);
                }else{
                    Alert.alert(
                        res[1].message
                    );
                }
            })
            .catch((error) => {
                console.error(error);
            });

            }
            else {
                Alert.alert(
                    "No Internet!",
                    "Needs to connect to the internet in order to work. Please connect tablet to wifi and try again.",
                    [
                        {
                            text: "OK",
                            onPress: () => { }
                        }
                    ]
                );
            };
        })
    };

Collectives™ on Stack Overflow

Await is only allowed within async functions error react native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related