How do I use Async Storage to save Data Locally after calling fetch in react native?-CodePudding

I want to use Async storage. Each time I call without the async function like this

FunctionLogin = () =>{ //other methods here ........ }

and this does not have await anywhere, it saves to the database but when i use let email = AsyncStorage.getItem('email'); to call it back, it does not return anything like the email just [Object object] is what i see

how do I resolve this

the fetch method to save to async storage looks like this

 `FunctionLogin = async () =>{
    //navigation.replace('VirtualAccountPage');

    let item = {email, password,phone};
    fetch('https://xxxxxxxxxxxxxxxx/api/sign-up', {
      method: 'POST',
      mode: 'cors',
      headers: {
        Accept: 'application/json',
        'Content-type': 'application/json',
      },
      body: JSON.stringify(item),
    })
      .then(response => response.json())
      .then(responseJson =>{
        if (responseJson.message === 'User created Successfully') {
            await AsyncStorage.setItem('email', email);
            await AsyncStorage.setItem('phone', phone);
          alert('I am Registered');
          navigation.replace('VirtualAccountPage');
        } else {
          alert(responseJson);
        }
      })
      .catch(error => {
        console.error(error);
      });
  }`

the function to call it back, so it can be used as persistence looks thus

`  FunctionUserDetails = () => {
    let email  = AsyncStorage.getItem('email');
    let phone  = AsyncStorage.getItem('telephone');
    //navigation.replace('Dashboard');
    alert(email);
  };`

How do i get this to work?

I want to be able to save data locally using async storage so i can be able to persist the data on some other screens etc. I tried several things to see if It could work as expected, i do not get to see it work as i want.

CodePudding user response：

to get the value from AsyncStorage you need to use await and the function should start with async

fetch('https://xxxxxxxxxxxxxxxx/api/sign-up', {
  method: 'POST',
  mode: 'cors',
  headers: {
    Accept: 'application/json',
    'Content-type': 'application/json',
  },
  body: JSON.stringify(item),
})
  .then(response => response.json())
  .then(async (responseJson) =>{ // add async here
    if (responseJson.message === 'User created Successfully') {
        await AsyncStorage.setItem('email', email);
        await AsyncStorage.setItem('phone', phone);
      alert('I am Registered');
      navigation.replace('VirtualAccountPage');
    } else {
      alert(responseJson);
    }
  })
  .catch(error => {
    console.error(error);
  });

const FunctionUserDetails = async () => { // change this
 let email  = await AsyncStorage.getItem('email'); // change this
 let phone  = await AsyncStorage.getItem('telephone'); // change this
 //navigation.replace('Dashboard');
 alert(email);
};`

CodePudding user response：

Install this updated async-storage npm

Try implementing using below code:

fetch('https://xxxx/login', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-type': 'application/json',
  },
  body: JSON.stringify(item),
})
  .then(response => response.json())
  .then(async (responseJson) =>{ // add async here
    if (responseJson.stausCode === 200) {
        await AsyncStorage.setItem('name', name);
    } else {
      alert(responseJson);
    }
  })
  .catch(error => {
    console.error(error);
  });