web-dev-qa-db-fra.com

Le stockage asynchrone ne fonctionne pas pour définir ou activer React Native

Je suis en train d'essayer de rendre l'authentification utilisateur en utilisant le stockage asynchrone pour décider quel écran sera rendu afin que lorsque je reçois les données du stockage asynchrone me revienne indéfini quelqu'un peut-il m'aider?

Mon code d'obtention:

var login;
AsyncStorage.getItem("login").then((value) => {
      login = value;
}).done();
alert(login);

Mon code de set:

const insert_user = (username) => {
  AsyncStorage.setItem("login", username);
  Toast.show({
    supportedOrientations: ['portrait', 'landscape'],
    text: `User registered with success`,
    position: 'bottom',
    buttonText: 'Dismiss'
  });
}
react-nativeasyncstorage
5
Luiz Fernando Sousa Camargo

alert(login); sera toujours indéfini car AsyncStorage.getItem est de nature asynchrone, ce qui signifie que l'alerte (connexion) est appelée en premier avant de recevoir la valeur de AsyncStorage.getItem.

AsyncStorage.getItem("login").then((value) => {
      alert(value); // you will need use the alert in here because this is the point in the execution which you receive the value from getItem.
    // you could do your authentication and routing logic here but I suggest that you place them in another function and just pass the function as seen in the example below.
});

// a function that receives value
const receiveLoginDetails = (value) => {
    alert(value);
}
// pass the function that receives the login details;
AsyncStorage.getItem("login").then(receiveLoginDetails);

Référence supplémentaire

9
Sharlon M. Balbalosa

importer {AsyncStorage} de 'react-native';

AsyncStorage.setItem('mobileNumber', phoneNumber.number);

AsyncStorage.getItem('mobileNumber', (error, result) => {
  this.setState({
    loginMobileNo: result,
  });
0
James Siva

Utilisation de "react-native": "0.56.0": -

Créez un fichier nommé "Pref.js" avec le contenu ci-dessous. (Pref.js est comme un fichier global pour définir et obtenir des données à l'aide d'AsyncStorage afin que vous puissiez l'utiliser dans n'importe quel fichier .js).

//---- Pref.js ---->
import { AsyncStorage, Alert } from "react-native"

export const kUserName = 'user_name';
export const kUserID = 'user_id';


export const setData = async (strKey, item) => {
    let value = JSON.stringify(item)
    if (value) {
        AsyncStorage.setItem(strKey, value);
    }
}

export const getData = (strKey, callback = (response1) => { }) => {
    AsyncStorage.getItem(strKey).then((value) => {
        callback(value)
    });
}

--------- Utilisation du fichier ci-dessus dans votre fichier "index.js" ---------> (importer le fichier Pref.js avec le chemin correct) 

import * as Pref from '../../Pref/Pref'   //IMPORTANT: set your file path.

onLoginClick = () => {

    // Set data in AsyncStorage using "Pref.js" file. "Pref.kUserName" is from Pref.js file:
    Pref.setData(Pref.kUserName, 'Hello World')

    // Get data from AsyncStorage using "Pref.js" file.
    Pref.getData(Pref.kUserName, (value) => {
        if (value) {
            Alert.alert(`Welcome ${value}`)
            //this.props.navigation.Push('Home')
        }
    });
}
0
Gaurav Rami