AsyncStorage reagieren Native Sitzung

Question

Wenn ich meine Anwendung ausführen, wenn ich Sitzungsdaten in AsyncStorage habe, ich lade es, aber es wird geladen, nachdem die Komponente eingehängt und an mainContainer als undefined gesendet, ich muss zuerst die Daten laden und dann senden es 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

Ihr machen in setzen, wenn die Anweisung von Daten

wenn Daten dann sonst

Answer 2

einführen Loading-Anzeige auf Ihre Komponentenbaum Laden laden. Überprüfen Sie den Wert von this.state.data. Stoppen Sie den Indikator erst, wenn Sie Daten gerendert haben.

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

Möglicherweise müssen Sie das Styling ändern.