AsyncStorage React Native Session

Question

When I run my application, if I have session data in AsyncStorage, I load it, but it's being loaded after the component mounts and sent to mainContainer as undefined, I need to first load the data and then send it to 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>
        );
    }

}

put your render in if the statement of Data if data then load else loading — Jigar
– Jigar, Commented Dec 15, 2017 at 6:05
Possible duplicate of React Native AsyncStorage fetches data after rendering — JSnow
– JSnow, Commented Dec 15, 2017 at 7:26

atitpatel · Accepted Answer · 2017-12-15 06:59:38Z

0

Introduce Loading Indicator to your component tree. Check for the value of this.state.data. Stop the indicator only once you render 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>
    );
}

You might have to change the styling.

answered Dec 15, 2017 at 6:59

atitpatel

3,2141 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AsyncStorage React Native Session

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related