Persistente Daten zwischen App startet mit Expo & React Native

Question

Hier ist meine App.js, alles andere ist so einfach wie ich es bekommen kann.

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> 
    ); 
    } 
} 

Der abgerufene value ist immer null.

Ich habe dies sowohl lokal als auch auf ReplIt versucht. In allen Fällen bleiben die Daten nicht über App-Ladevorgänge hinweg bestehen. Ich sehe immer:

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

Was mache ich falsch? Habe ich eine falsche Annahme, wie Expo mit dem dauerhaften Speicher interagiert? AFAIK, AsyncStorage soll Sachen auf dem Gerät speichern; damit ich die App schließen und wieder öffnen kann und die Daten erhalten bleiben.

Answer 1

UPD: i Code nur realisiert werden, wie erwartet gearbeitet ... es wahrscheinlich replit Problem ist wie in Kommentar erwähnt.

Vermeiden Sie alle Anfragen und asynchronen Aufrufe in render Methode, denn es könnte Mai mal aufgerufen werden abhängig davon, wie Requisiten oder Zustand ändern. Setzen Sie den gesamten Code in componentDidMount, wie es in documentation empfohlen wird. Es wird nur einmal aufgerufen, wenn die Komponente montiert ist.

nicht sicher, warum Ihr Code dodnt für Sie gearbeitet werden Rückrufe für AsyncStorage erlaubt, jedoch Werke warten nur gut für mich:

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

geben Sie diese einen Versuch. AsyncStorage ist eine auf Javascript Promise basierende Methode.

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

oder

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