React NativeがAsyncStorageが値を取得するのを待ちます

Question

これは一般的な問題です.ReactNativeは、値がAsyncStorageから取得される前にレンダリングしようとしています。私はいくつかの場所でこれのための解決策を見てきましたが、何らかの理由でそれはまったく私のためには機能しません。私はReact Native 25.1を使っているからかもしれませんね？それはちょうど「Loading ...」に無期限に立ち往生します。コンソールログをレンダリングしてisLoading（ifメソッドなし）を表示すると、falseが返され、次にtrueが返されるので、理論上は動作するはずです。しかし、ifメソッドが有効になっていると「読み込み中」が永久に停止し、ログだけがfalseを返します。

import React, { Component } from 'react'; 

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

    class MainPage extends Component { 
    constructor(props: Object): void { 
    super(); 
    this.state = { 
    isLoading: false, 
    }; 
} 

    componentWillMount() { 
    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/>; 
    } 

}); 

Answer 1

ねえ

import React, { Component } from 'react'; 

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

class MainPage extends Component { 

    constructor(props: Object): void { 
     super(props); 
     this.state = { 
     isLoading: false, 
     }; 
    } 

    componentWillMount() { 
    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/>; 
    } 
}