Comment puis-je récupérer des données depuis Async storage et les utiliser dans mon composant ?

Question

J'ai enregistré un user_id et un jeton dans le stockage asynchrone et je peux le récupérer via la console avec la fonction de récupération. Je sais donc que la fonction de configuration fonctionne parfaitement, les fonctions dans deviceStorage sont toutes asynchrones.

Le problème survient lorsque j'essaie d'utiliser le user_id et le jeton récupérés dans mon composant, cela renvoie undefined.

Comment puis-je récupérer un élément du stockage et l'utiliser ultérieurement dans mon code, je veux utiliser le jeton et l'identifiant utilisateur pour une requête fetch. Veuillez m'aider et indiquer la meilleure façon de procéder.

    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 pour la récupération et la mise en place

import {AsyncStorage} from 'react-native';

const deviceStorage = {
    async storeItem(key, item) {
        try {
            //nous voulons attendre que la promesse retournée par AsyncStorage.setItem()
            //soit résolue pour obtenir la valeur réelle avant de retourner la valeur
            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

Il existe deux façons d'obtenir les données stockées dans le stockage asynchrone :

(1) Méthode de la promesse. Ici, votre code n'attend pas que le bloc se termine et renvoie une promesse qui est accompagnée d'une clause .then si la promesse se résout et d'une clause .catch s'il y a une erreur.

(2) Méthode Async et Await. C'est plus préféré, ici votre code attend l'exécution avant de procéder à l'un des exemples ci-dessous :

retrieveData() {
 AsyncStorage.getItem("id").then(value => {
        if(value == null){
             //Si la valeur n'est pas définie ou si votre stockage asynchrone est vide
        }
        else{
             //Traitez vos données
        }
      })
        .catch(err => {
            // Ajoutez une gestion des erreurs
  });

Deuxième exemple de méthode :

async retrieveData() {
try {
 let value = await AsyncStorage.getItem("id");
 if (value !== null) {
  //vous avez vos données dans la variable value
  return value;
 }
}
catch (error) {
// Erreur lors de la récupération des données
}
}

Answer 2

Vos méthodes de stockage de récupération de données devraient ressembler à ceci

retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // Nous avons des données !!
      return value;
    }
  } catch (error) {
    // Erreur lors de la récupération des données
  }
  return null;
};

Answer 3

Ajout aux solutions précédentes

//fonction pour récupérer des données
async function retrieveItem(key) {
 try {
  const retrievedItem =  await AsyncStorage.getItem(key); //type de données String
   const item = JSON.parse(retrievedItem);//type de données objet
   return item;
 }  catch (error) {
   console.log(error.message);
 }
 return
}

//appel de la fonction
retrieveItem(key).then((value) => {
          //contrairement à un appel de fonction normal, cela attend que la promesse soit complétée
          return value;// valeur réelle et non la promesse
          })
          .catch((error) => {
             console.log('Erreur : ' + error);
          });