Données persistantes entre les lancements d'applications avec Expo & React Native

Question

Voici mon App.js, tout le reste est aussi simple que je peux l'obtenir.

import React from 'react'; 
import { AsyncStorage, Text, View } from 'react-native'; 

export default class App extends React.Component { 
    render() { 

    console.log("Fetching data") 
    AsyncStorage.getItem('@MySuperStore:key', (value) => { 
     console.log("Fetched data: ", value) 
     if(value == null) { 
     console.log("Writing data!") 
     AsyncStorage.setItem('@MySuperStore:key', 'data',() => { 
      console.log("Wrote data!") 
     }) 
     } 
    }) 

    return(
    <View> 
     <Text>Hello, ReplIt</Text> 
    </View> 
    ); 
    } 
} 

Le value tiré par les cheveux est toujours null. J'ai essayé ceci localement et sur ReplIt. Dans tous les cas, les données ne persistent pas entre les charges d'application. Je vois toujours:

Fetching data 
Fetched data: null 
Writing data! 
Wrote data! 

Qu'est-ce que je fais mal? Ai-je une hypothèse incorrecte sur la manière dont Expo interagit avec le stockage persistant? AFAIK, AsyncStorage est censé enregistrer des choses à l'appareil; donc je peux fermer et ré-ouvrir l'application et avoir les données persistent.

Answer 1

UPD: je viens de réaliser votre code a fonctionné comme prévu ... il est probablement question replit comme mentionné dans le commentaire.

Évitez les demandes et les appels asynchrones dans la méthode render, car ils peuvent être appelés parfois en fonction de la façon dont les accessoires ou l'état changent. Mieux vaut mettre tout le code correspondant dans componentDidMount comme il est recommandé dans documentation. Il ne sera appelé qu'une seule fois lors du montage du composant.

Je ne sais pas pourquoi votre code dodnt travaillé pour vous, les callbacks sont autorisés pour AsyncStorage cependant attendre fonctionne très bien pour moi:

import React from "react"; 
import { AsyncStorage, Text, View } from "react-native"; 

export default class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     storedValue: null 
    }; 
    } 
    async componentDidMount() { 
    let storedValue = await AsyncStorage.getItem("@MySuperStore:key"); 
    console.log("Fetched data: ", storedValue); 
    if (storedValue == null) { 
     console.log("Writing data!"); 
     storedValue = await AsyncStorage.setItem("@MySuperStore:key", "data"); 
    } 
    this.setState({ 
     storedValue 
    }); 
    } 

    render() { 
    const { storedValue } = this.state; 
    return (
     <View> 
     <Text>Hello, ReplIt</Text> 
     <Text>This is Stored Value, '{storedValue}'</Text> 
     </View> 
    ); 
    } 
} 

Answer 2

essayez-les. AsyncStorage est une méthode basée sur Javascript Promise.

AsyncStorage.getItem('@MySuperStore:key') 
.then(value => console.log(value)) 

ou

value = await AsyncStorage.getItem('@MySuperStore:key'); 
console.log(value);