Expo 및 React Native로 앱 시작 사이에 데이터 지속하기

Question

여기 내 App.js입니다. 그 외 모든 것은 표준/간단하게 얻을 수 있습니다.

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

페치 value은 항상 null입니다.

저는 이것을 로컬 및 ReplIt에서 모두 시도했습니다. 모든 경우에 데이터가 앱로드를 넘어서 유지되지 않습니다. 나는 항상 다음을 본다 :

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

내가 뭘 잘못하고 있니? Expo가 영구 저장 장치와 상호 작용하는 방법에 대한 잘못된 가정이 있습니까? AFAIK, AsyncStorage은 물건을 장치에 저장해야합니다. 그래서 앱을 닫고 다시 열어서 데이터를 유지할 수 있습니다.

Answer 1

UPD : 난 그냥 코드가 예상대로 ... 아마 코멘트에서 언급 한 바와 같이 replit 문제는 ​​일을 깨달았다.

render 메서드에서 요청 및 비동기 호출을 피하십시오. 소품이나 상태 변경 방법에 따라 호출 할 수 있기 때문에 요청 및 비동기 호출을 피할 수 있습니다. documentation에서 권장하는대로 모든 관련 코드를 componentDidMount에 넣는 것이 좋습니다. 구성 요소가 마운트 될 때 한 번만 호출됩니다.

확실하지 코드의 dodnt 당신을 위해 일을 왜 콜백 그러나 나를 위해 잘 작동 기다린 AsyncStorage 허용됩니다

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

이러한 기능을 사용해보십시오. AsyncStorage는 Javascript Promise 기반 메소드입니다.

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

또는

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