React Native w/ TypeScript this.setState is not a function

Question

I'm currently using React Native 0.39.2 w/ newest TypeScript and when I run my componentDidMount() method and setState I get an error around this.setState is not a function.

I tried binding with this.setState({isLoggedIn: true}).bind(this)

though since I'm using a boolean as the type it won't let me without giving a type error and even setting to any type still gets same error.

here's my code

First with my interface for State

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 {

}

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() {

      if (!this.isLoggedIn) {

          Actions.welcome();

      }

      firestack.auth.listenForAuth(function(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);

        }


    }); 

}

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

Is there anything I'm missing here?

post your whole file. how are you declaring your class?

bluetoft
– bluetoft

2016-12-24 02:40:40 +00:00
Commented Dec 24, 2016 at 2:40 — bluetoft
– bluetoft, Commented Dec 24, 2016 at 2:40
looks like there is a great deal you are missing

Maxwelll
– Maxwelll

2016-12-24 03:10:23 +00:00
Commented Dec 24, 2016 at 3:10 — Maxwelll
– Maxwelll, Commented Dec 24, 2016 at 3:10

max23_ · Accepted Answer · 2016-12-24 09:02:39Z

3

The issue is because in the callback function for listenForAuth, this is no longer referring to the MainList object.

Try switching to arrow function expression which solve the this binding issue:

firestack.auth.listenForAuth((evt: any) => {
  ...
});

Here is a good read if you want to know more about arrow function.

answered Dec 24, 2016 at 9:02

max23_

6,6894 gold badges24 silver badges36 bronze badges

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

4 Comments

Mike P Over a year ago

thank you so much :-) i should of realized this but I forgot to mention I am a little new, but this helped so much especially the help reference at the end!

max23_ Over a year ago

You are welcome! There are a few other solutions (e.g. bind(this) or var that = this;), but I find it a lot more easier using arrow function (which was introduced in ES6).

Mike P Over a year ago

would I do the var that = this; outside the class definition if i were to do that i'm gathering?

max23_ Over a year ago

You can define var that = this; inside componentDidMount() function, then you can use that.setState() in the callback function.

Collectives™ on Stack Overflow

React Native w/ TypeScript this.setState is not a function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related