ReactネイティブAsyncStorageはレンダリング後にデータを取得します

Question

AsyncStorageをComponentWillMountに保存すると、accessTokenにローカルに格納されますが、render()機能が実行された後に約束を返します。約束が完了するまで、どうすればrender()を待つことができますか？ありがとうございました。

Answer 1

から情報を取得として、ロード画面は、あなたとしてそれを再レンダリングしてもらいます。私が取り組んでいるアプリケーションで行ったことは、AsyncStorageからの約束が解決されるまで、読み込み画面を追加することです。以下の例を参照してください：

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

class Screen extends React.Component { 

    state = { 
    isLoading: true 
    }; 

    componentDidMount() { 
    AsyncStorage.getItem('accessToken').then((token) => { 
     this.setState({ 
     isLoading: false 
     }); 
    }); 
    }, 

    render() { 
    if (this.state.isLoading) { 
     return <View><Text>Loading...</Text></View>; 
    } 
    // this is the content you want to show after the promise has resolved 
    return <View/>; 
    } 

} 

を状態オブジェクトにisLoadingプロパティを設定すると、再描画が発生しますと、あなたはaccessTokenに依存しているコンテンツを表示することができます。

私は、AsyncStorageのデータ管理を簡略化するreact-native-simple-storeという小さなライブラリを作成しました。あなたはそれが有用であることを願っています。反応ネイティブdocに基づいて

Answer 2

リアクションネイティブは、ブロッキング関数をサポートしていないJavascriptに基づいています。これは、UIが固まったり、反応しないようにしたくないため意味があります。 あなたができることは、レンダー機能でこれを処理することです。すなわちあなたはrenderは、私の知る限り待つことはできませんあなたがAsyncStorage

Answer 3

は、あなたがこのような何かを行うことができます。

正確にあなたがデータをどうしようとしている何

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

let STORAGE_KEY = '@AsyncStorageExample:key'; 

export default class MyApp extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     loaded: 'false', 
    }; 
    } 

    _setValue = async() => { 
    try { 
     await AsyncStorage.setItem(STORAGE_KEY, 'true'); 
    } catch (error) { // log the error 
    } 
    }; 

    _loadInitialState = async() => { 
    try { 
     let value = await AsyncStorage.getItem(STORAGE_KEY); 
     if (value === 'true'){ 
     this.setState({loaded: 'true'}); 
     } else { 
     this.setState({loaded: 'false'}); 
     this._setValue(); 
     } 
    } catch (error) { 
     this.setState({loaded: 'false'}); 
     this._setValue(); 
    } 
    }; 

    componentWillMount() { 
    this._loadInitialState().done(); 
    } 

    render() { 
    if (this.state.loaded === 'false') { 
     return (
     <View><Text>Loading...</Text></View> 
    ); 
    } 
    return (
     <View><Text>Main Page</Text></View> 
    ); 
    } 
}