Problem when trying to use AsyncStorage with react native

Question

I am new to react native and I tried to make my first app. I am in the process of making the login/signup pages. I am trying to use AsyncStorage to make the app remember the user. I tested out this code-

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView  } from 'react-native';
import React, {useState, useEffect} from 'react'
import { TextInput } from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';








export default function Login(props) {

  const message = props.navigation.getParam('message', null)
  const [ username, setUsername ] = useState("")
  const [ password, setPassword ] = useState("")

  setStringValue = async(value, user) => {
    try {
      
      await AsyncStorage.setItem( user, value)
    } catch(e){
      console.log(e)
    }
  }

  const getData = async (user) => {
    try {
      const value = await AsyncStorage.getItem(user)
      if(value !== null) {
        return value
      } else {
        return false
      }
    } catch(e) {
      console.log(e)
    }
  }

  

  const log = () => {

    fetch(`http://192.168.5.223:8000/home/login/`, {
      method: 'POST',
      headers: {
          "Content-Type": 'application/json'
         },
      body: JSON.stringify({ username: username, password: password}),
  })
  .then( res => res.json())
  .then( res => {
    console.log(res)
    
    if (res.valid === true){

      setStringValue(username, username)

      let ch = getData(username)

      console.log(ch)
      

      
      
      
      
      if (res.set === true){
        props.navigation.navigate("Home", {"user": username})
      } else {
        props.navigation.navigate("Profile", {"user": username})
      }
      
    } else {
      props.navigation.navigate("Login", {'message': "username/password are incorrect"})
    }
    

  })
  .catch( error => console.log(error))
  



  



  }

  const sign = () => {

    props.navigation.navigate("Signup")

  }

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scroll} >
      <View style={styles.main}>
      <Text style={styles.error}>{message}</Text>  
      <Text style={styles.label}>
        Username: 
      </Text>
      <TextInput style={styles.input} placeholder="Username" 
        onChangeText={ text => setUsername(text)} value={username}
        autoCapitalize={'none'}
         />
      
      <Text style={styles.label}>Password:</Text>
      <TextInput style={styles.input} placeholder="Password" onChangeText={ text => setPassword(text)}
        value={password} secureTextEntry={true} autoCapitalize={'none'}
      />

      
      <Button onPress={ () => log()} title="Login"></Button>
      </View>
      </ScrollView>
      <View style={styles.footer}>
        <Button onPress={ () => sign()} title="Don't have an acount? Sign up now" />
      </View>
      <StatusBar style="auto"/>
    </View>


  )


}

Login.navigationOptions = screenProps => ({
  headerLeft: () => null,
  gestureEnabled: false,
  headerStyle: {
    backgroundColor: 'black'
  },
  headerTintColor: 'white',

})

But the AsyncStorage logged -

Promise {

"_U": 0,

"_V": 0,

"_W": null,

"_X": null,

} How can I get this to work?

Without running the code, is there a reason you are not awaiting the fetch call? `const log = async() => { await fetch /*...*/ }).then(...etc...)`? — DSMTurboAWD, Aug 17 '22 at 01:04
The object you're getting back is a pending promise. Async code has to be awaited or you can use .then syntax — Abe, Aug 17 '22 at 01:25
You can find the solution here: https://stackoverflow.com/questions/64906396/fetch-api-always-returns-u-0-v-0-w-null-x-null/64906615#64906615 — limco, Aug 17 '22 at 02:32

poojan bhatt · Accepted Answer · 2022-08-17T09:10:11.507

getData and setStringValue are asynchronous functions. So you have to put await before calling them and also mark callback function as async.

so Please try this log function

const log = () => {

    fetch(`http://192.168.5.223:8000/home/login/`, {
        method: 'POST',
        headers: {
            "Content-Type": 'application/json'
        },
        body: JSON.stringify({ username: username, password: password }),
    })
        .then(res => res.json())
        .then( async (res) => {
            console.log(res)

            if (res.valid === true) {

                await setStringValue(username, username)

                let ch = await getData(username)

                console.log(ch)

                if (res.set === true) {
                    props.navigation.navigate("Home", { "user": username })
                } else {
                    props.navigation.navigate("Profile", { "user": username })
                }

            } else {
                props.navigation.navigate("Login", { 'message': "username/password are incorrect" })
            }

        })
        .catch(error => console.log(error))

}

Full Code

import { StatusBar } from 'expo-status-bar'
import React, { useState, useEffect } from 'react'
import { TextInput } from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView } from 'react-native';


export default function Login(props) {

    const message = props.navigation.getParam('message', null)
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")

    const setStringValue = async (value, user) => {
        try {

            await AsyncStorage.setItem(user, value)
        } catch (e) {
            console.log(e)
        }
    }

    const getData = async (user) => {
        try {
            const value = await AsyncStorage.getItem(user)
            if (value !== null) {
                return value
            } else {
                return false
            }
        } catch (e) {
            console.log(e)
        }
    }

    const log = () => {

        fetch(`http://192.168.5.223:8000/home/login/`, {
            method: 'POST',
            headers: {
                "Content-Type": 'application/json'
            },
            body: JSON.stringify({ username: username, password: password }),
        })
            .then(res => res.json())
            .then(async (res) => {
                console.log(res)

                if (res.valid === true) {

                    await setStringValue(username, username)

                    let ch = await getData(username)

                    console.log(ch)

                    if (res.set === true) {
                        props.navigation.navigate("Home", { "user": username })
                    } else {
                        props.navigation.navigate("Profile", { "user": username })
                    }

                } else {
                    props.navigation.navigate("Login", { 'message': "username/password are incorrect" })
                }

            })
            .catch(error => console.log(error))

    }

    const sign = () => {

        props.navigation.navigate("Signup")

    }

    return (
        <View style={styles.container} >
            <ScrollView style={styles.scroll} >
                <View style={styles.main}>
                    <Text style={styles.error}> {message} </Text>
                    < Text style={styles.label} >
                        Username:
                    </Text>
                    <TextInput style={styles.input} placeholder="Username"
                        onChangeText={text => setUsername(text)} value={username}
                        autoCapitalize={'none'}
                    />

                    <Text style={styles.label}> Password: </Text>
                    <TextInput style={styles.input} placeholder="Password" onChangeText={text => setPassword(text)}
                        value={password} secureTextEntry={true} autoCapitalize={'none'}
                    />


                    <Button onPress={() => log()} title="Login" > </Button>
                </View>
            </ScrollView>
            < View style={styles.footer} >
                <Button onPress={() => sign()} title="Don't have an acount? Sign up now" />
            </View>
            < StatusBar style="auto" />
        </View>
    )
}

Login.navigationOptions = screenProps => ({
    headerLeft: () => null,
    gestureEnabled: false,
    headerStyle: {
        backgroundColor: 'black'
    },
    headerTintColor: 'white',

})

I get "Unexpected reserved word 'await'." when I put await in front of the 'ch' variable and the setStringValue(...) — Itay Lador, Aug 17 '22 at 03:32

score 1 · Answer 2 · answered Aug 17 '22 at 02:27

A quick tip.

Whenever you receive a output like this:

Promise {

"_U": 0,

"_V": 0,

"_W": null,

"_X": null,
}

This means that the Promise has not been properly handled.

Try to use async/await to get the proper output out of the promise.

Solution

let ch = await getData(username)

but you will need to put async before the function

Full Code

const log = async () => {
  fetch(`http://192.168.5.223:8000/home/login/`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username: username, password: password }),
  })
    .then((res) => res.json())
    .then((res) => {
      console.log(res);

      if (res.valid === true) {
        setStringValue(username, username);

        let ch = await getData(username);

        console.log(ch);

        if (res.set === true) {
          props.navigation.navigate("Home", { user: username });
        } else {
          props.navigation.navigate("Profile", { user: username });
        }
      } else {
        props.navigation.navigate("Login", {
          message: "username/password are incorrect",
        });
      }
    })
    .catch((error) => console.log(error));
};

Official Functions.

Rather than to create your own functions, you can directly use the offifcial functions. Save them in your utils and use them whenever required.

Setting Values

_storeData = async () => {
  try {
    await AsyncStorage.setItem(
      '@MySuperStore:key',
      'I like to save it.'
    );
  } catch (error) {
    // Error saving data
  }
};

Getting Values

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

I get "Unexpected reserved word 'await'." when I put await in front of the 'ch' variable. — Itay Lador, Aug 17 '22 at 03:28

Problem when trying to use AsyncStorage with react native

2 Answers2

Solution

Full Code

Official Functions.

Setting Values

Getting Values