React Native + TypeScript, can't set State

Question

I know my functioning is running but for whatever reason I can't set the state of this property "isLoggedIn"

In the componentDidMount() I setState based on login detection and it doesn't seem to work.

import React, {
   Component
} from 'react';
import { AppRegistry, View, StyleSheet, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

import Firestack from 'react-native-firestack';

const firestack = new Firestack();

interface Props {
   isLoggedIn?: boolean;
}

interface State {
   isLoggedIn: boolean;
}


export default class MainList extends Component<Props, State> {

    state = {
      isLoggedIn: false,
    };

    constructor(props: any) {

       super(props);
       console.log("Is anyone logged in?: " + this.isLoggedIn);

    }

    isLoggedIn = this.state.isLoggedIn;

    componentDidMount() {

      firestack.auth.listenForAuth((evt: any) => {
      // evt is the authentication event
      // it contains an `error` key for carrying the
      // error message in case of an error
      // and a `user` key upon successful authentication

        if (!evt.authenticated) {
        // There was an error or there is no user
        //console.error(evt.error);

        this.setState({isLoggedIn: false});
        console.log("The state of isLoggedIn is: " + this.isLoggedIn);

        } else {
        // evt.user contains the user details
        console.log('User details', evt.user);

        this.setState({isLoggedIn: true});
        console.log("The state of isLoggedIn is: " + this.isLoggedIn);

        }

        if (!this.isLoggedIn) {

            Actions.welcome();

        }


    }); 

}

render() {

    return (
        <View style={styles.View}>

            <Text style={styles.textLabel}>The main view</Text>

        </View>
       )

     }

  }

const styles = StyleSheet.create({

    View: {
       padding: 20
    },
   textLabel: {
    fontSize: 20,
    marginBottom: 10,
    height: 20
  },
textInput: {
    height: 20,
    fontSize: 15,
    marginBottom: 20
}

 });

 AppRegistry.registerComponent('MainList', ()=> MainList);

Anything that I'm doing wrong?

you can not set state inside componentDidMount()

Codesingh
– Codesingh

2016-12-24 21:40:48 +00:00
Commented Dec 24, 2016 at 21:40 — Codesingh
– Codesingh, Commented Dec 24, 2016 at 21:40

thedayturns · Accepted Answer · 2016-12-25 01:53:12Z

4

    this.setState({isLoggedIn: false});
    console.log("The state of isLoggedIn is: " + this.isLoggedIn);

This code will not work. setState is asynchronous, so this.isLoggedIn is not necessarily updated immediately after you call setState. If you want to access the new value immediately, use the callback that triggers when the state is set:

this.setState({ isLoggedIn: false }, () => console.log(this.state.isLoggedIn));

Or, use this method of setting the state:

this.setState(oldState => {
    oldState.isLoggedIn = false;

    console.log(oldState.isLoggedIn);
    return oldState;
});

answered Dec 25, 2016 at 1:53

thedayturns

11k5 gold badges38 silver badges46 bronze badges

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

1 Comment

Mike P Over a year ago

thank you i didn't think to think that it was asynchronous...good to know there. fixed my problem now :-) thank you!

Codesingh · Accepted Answer · 2016-12-24 21:45:57Z

0

Fetch data in componentDidMount. When the response arrives, store the data in state by calling setstate inside callback.

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

answered Dec 24, 2016 at 21:45

Codesingh

3,3941 gold badge14 silver badges19 bronze badges

Collectives™ on Stack Overflow

React Native + TypeScript, can't set State

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related