AsyncStorage Reactネイティブセッション

Question

AsyncStorageにセッションデータがある場合はロードしますが、コンポーネントがマウントされてundefinedとしてmainContainerに送信された後にロードされています。まずデータをロードしてから送信しますMainContainer

export default class AppContainer extends Component<{}> { 
    constructor(props) { 
     super(props); 

     this.state = { 
      data: this.props.data, 
      authtoken: this.props.authtoken, 
      sucursal: this.props.sucursal 
     }; 
    } 


    componentWillMount() { 
     if(AsyncStorage.getItem('authtoken') !== null){ 
     this.getDataFromStorage(); 
     } 
    } 

    async getDataFromStorage() { 
     AsyncStorage.getItem('authtoken').then((token) => { 
      this.setState({ authtoken: token }); 
      console.log(this.state.authtoken); 
     }); 
     AsyncStorage.getItem('data').then((dataStorage) => { 
      this.setState({ data: JSON.parse(dataStorage) }); 
      console.log(this.state.data); 
     }); 
    } 

    componentDidMount() { 
     console.log(this.state.data); 
     console.log(this.state.authtoken); 

    } 




    render(props) { 
     return (
      <View style={styles.bigContainer}> 
       <Header/> 
       <MainContainer data={this.state.data} authtoken={this.state.authtoken} sucursal={this.state.sucursal}/> 
      </View> 
     ); 
    } 

} 

Answer 1

には、データ

のif文データは、その後

Answer 2

は、あなたのコンポーネントツリーにロードインジケータを導入ロード他に読み込む場合は、あなたの中にレンダリング置きます。 this.state.dataの値を確認します。データをレンダリングした後にのみインジケータを停止します。

render(props) { 
    return (
     <View style={styles.bigContainer}> 
      <ActivityIndicator animating={!this.state.data} size="large" color="#0000ff" /> 
      <Header/> 
      <MainContainer data={this.state.data} authtoken={this.state.authtoken} sucursal={this.state.sucursal}/> 
     </View> 
    ); 
} 

スタイリングを変更する必要があります。