React this setState is not a function

Question

I m new in React and I m trying to write an app working with an API  I keep getting this error         TypeError  this setState is not a function      when I try to handle the API response  I suspect it s something wrong with this binding but I can t figure out how to fix it  Here s the code of my component     var AppMain   React createClass        getInitialState  function              return               FirstName                               componentDidMount function             VK init function                 console info  API initialisation successful                 VK api  users get   fields   photo 50   function data                    if data response                        this setState     the error happens here                          FirstName  data response 0  first name                                               console info this state FirstName                                                     function             console info  API initialisation failed                   5 34                 render function             return                 lt div className  appMain  gt                lt Header    gt                lt  div gt

User · Answer

If you re doing this and still having an issue  my problem is I was calling two variables the same name   I had companies as an object brought in from Firebase  and then was trying to call this setState  companies  companies   - it wasn t working for obvious reasons

User · Answer

you could also save a reference to this before you invoke the api method   componentDidMount function         var that   this       VK init function            console info  API initialisation successful            VK api  users get   fields   photo 50   function data               if data response                   that setState     the error happens here                     FirstName  data response 0  first name                                     console info that state FirstName                                    function            console info  API initialisation failed             5 34

User · Answer

You can avoid the need for  bind this  with an ES6 arrow function   VK api  users get   fields   photo 50    data    gt            if data response               this setState     the error happens here                 FirstName  data response 0  first name                             console info this state FirstName

User · Answer

Here THIS context is getting changed  Use arrow function to keep context of React class           VK init      gt                console info  API initialisation successful                VK api  users get   fields   photo 50    data    gt                    if data response                       this setState     the error happens here                         FirstName  data response 0  first name                                             console info this state FirstName                                                 function            console info  API initialisation failed                 5 34

User · Answer

The callback is made in a different context   You need to bind to this in order to have access inside the callback   VK api  users get   fields   photo 50   function data       if data response           this setState     the error happens here             FirstName  data response 0  first name                     console info this state FirstName            bind this      EDIT  Looks like you have to bind both the init and api calls   VK init function            console info  API initialisation successful            VK api  users get   fields   photo 50   function data               if data response                   this setState     the error happens here                     FirstName  data response 0  first name                                     console info this state FirstName                            bind this          bind this   function        console info  API initialisation failed             5 34

User · Answer

React recommends bind this in all methods that needs to use this of class instead this of self function   constructor props        super props      this onClick   this onClick bind this      onClick           this setState             Or you may to use arrow function instead

User · Answer

You just need to bind your event   for ex-      place this code to your constructor  this  handleDelete   this  handleDelete bind this       and your setState function will work perfectly   handleDelete id        this state list splice id  1        this setState   list  this state list             this setState  list  list

User · Answer

You no need to assign this to a local variable if you use arrow function  Arrow functions takes binding automatically and you can stay away with scope related issues   Below code explains how to use arrow function in different scenarios  componentDidMount        gt         VK init      gt            console info  API initialisation successful            VK api  users get   fields   photo 50    data    gt                if data response                   that setState     this available here and you can do setState                     FirstName  data response 0  first name                                     console info that state FirstName                                         gt            console info  API initialisation failed             5 34

User · Answer

Now in react with es6 7 you can bind function to current context with arrow function like this  make request and resolve promises like this    listMovies   async      gt     const request   await VK api  users get   fields   photo 50      const data   await request json    if  data      this setState  movies  data          With this method you can easily call this function in the componentDidMount and wait the data before render your html in your render function   I don t know the size of your project but I personally advise against using the current state of the component to manipulate datas  You should use external state like Redux or Flux or something else for that

User · Answer

use arrow functions  as arrow functions point to parent scope and this will be available    substitute of bind technique

User · Answer

Now ES6 have arrow function it really helpful if you really confuse with bind this  expression you can try arrow function  This is how I do   componentWillMount             ListApi getList                then JsonList   gt  this setState   List  JsonList                Above method equalent to this         componentWillMount              ListApi getList                 then function  JsonList                     this setState   List  JsonList                    bind this

[javascript] React this.setState is not a function

Examples related to javascript

Examples related to reactjs

Examples related to react-state