如何从异步存储中检索数据并在我的组件中使用它？

Question

I have saved a user_id and token in Async storage and i can retrieve it in via console log. with the retrive function. So i know the set function is working perfectly, the functions in deviceStorage all Async.

The problem comes when trying to use the retrieved user_id & token in my component it returns undefined.

How can i get an item from storage and use it later in my code, i want to use the token and userid for a fetch request. Please help me and highlight the best way to do.

    import deviceStorage from "../components/services/deviceStorage";
    class Jobs extends Component {
    constructor() {
       super();
       this.state = {
       jobsData: [],
       isLoading: true
       };
      }

    componentDidMount() {


        deviceStorage.retrieveToken().then(token => {
            this.setState({
               token: token
                 });
        });

        deviceStorage.retrieveUserId().then(user_id => {
            this.setState({
               user_id: user_id
             });
        });


const opts = {
  method: "GET",

  headers: {
    "Content-Type": "application/json",
    Authorization: "Token " + this.state.token
  }
};

fetch("http://example.com/job/" + this.user_id, opts)
  .then(res => res.json())
  .then(jobs => {
    this.setState({
      jobsData: jobs,
      isLoading: false
    });
    console.log(jobsData);
  })
  .catch(error => {
    console.error(error);
  });
  }

  render {} 

Code for the retrieve and set

import {AsyncStorage} from 'react-native';


const deviceStorage = {
    async storeItem(key, item) {
        try {
            //we want to wait for the Promise returned by AsyncStorage.setItem()
            //to be resolved to the actual value before returning the value
            var jsonOfItem = await AsyncStorage.setItem(key, JSON.stringify(item));
            return jsonOfItem;
        } catch (error) {
           console.log(error.message);
        }
    },
    async retrieveItem(key) {
        try {
            const retrievedItem = await AsyncStorage.getItem(key);
            const item = JSON.parse(retrievedItem);
           // console.log(item);
            return item;
        } catch (error) {
            console.log(error.message);
        }
        return
    }
};

export default deviceStorage;`

Answer 1

There are two ways to get the data stored in async storage:

(1) Promise method. Here your code does not wait for the block to finish and returns promise which is accompanied by .then clause if the promise resolves and .catch clause if there is error.

(2) Async and Await method. This is more preferred, here your code waits for the execution before proceeding one of the example to refer is below:

retrieveData() {
 AsyncStorage.getItem("id").then(value => {
        if(value == null){
             //If value is not set or your async storage is empty
        }
        else{
             //Process your data 
        }
      })
        .catch(err => {
            // Add some error handling
  });

Second Method example:

async retrieveData() {
try {
 let value = await AsyncStorage.getItem("id");
 if (value !== null) {
  //you have your data in value variable
  return value;
 }
}
catch (error) {
// Error retrieving data
}


}

Answer 2

your retrieve data storage methods should look like this

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

Answer 3

Adding to the previous solutions

//function to retrieve data
async function retrieveItem(key) {
 try {
  const retrievedItem =  await AsyncStorage.getItem(key); //dataType String
   const item = JSON.parse(retrievedItem);//dataType object
   return item;
 }  catch (error) {
   console.log(error.message);
 }
 return
}

//function call
retrieveItem(key).then((value) => {
          //unlike normal function call, this waits for the promise to complete
          return value;// actual value not the promise
          })
          .catch((error) => {
             console.log('Error: ' + error);
          });