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 (
            <div className="appMain">
            <Header  />
            </div>
        );
    }
});

Davin Tryon · Accepted Answer · 2015-06-25T09:17:09.717

405

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

edited Jun 25 '15 at 09:17

answered Jun 25 '15 at 09:00

Davin Tryon

64,963
15
144
131

@TravisReeder, no. There's no mention of bind in the tutorial. – Tor Haugen Mar 19 '18 at 14:45
11

There probably was 2.5 years ago. – Travis Reeder Mar 19 '18 at 14:55
2

I used the arrow function to solve the problem. Thanks for the help – Tarun Nagpal Oct 13 '19 at 06:54
Can someone elaborate further on what is meant by "callback is made in a different context"? – S.B. Jan 20 '20 at 04:16
Holy. I spent hours and I could've just done a bind?.... At least its working now – booky99 May 04 '21 at 22:55

score 153 · Answer 2 · answered Jan 26 '16 at 17:52

153

You can avoid the need for .bind(this) with an ES6 arrow function.

VK.api('users.get',{fields: 'photo_50'},(data) => {
        if(data.response){
            this.setState({ //the error happens here
                FirstName: data.response[0].first_name
            });
            console.info(this.state.FirstName);
        }

    });

answered Jan 26 '16 at 17:52

goodhyun

4,568
3
32
25

1

This works well. In fact, the keyword of function should not be shown up in a file of es6. – JChen___ Jul 12 '16 at 14:32
7

Your answer helped me:-) Using an ES6 class and RN 0.34, I found two ways to bind "this" to a callback function. 1) `onChange={(checked) => this.toggleCheckbox()}`, 2) `onChange={this.toggleCheckbox.bind(this)}`. – devdanke Oct 16 '16 at 00:12
This is good as long as you don't need to support old browsers. – User Mar 30 '17 at 20:15
Perfect solution – Hitesh Sahu Jul 26 '17 at 09:11
2

GMsoF, those two solutions work because a) when you do `.bind(this)`, it sets the value of `this` to the parent context where `this.toggleCheckbox()` is called from, otherwise `this` would refer to where it was actually executed. b) The fat arrow solution works because it retains the value of `this`, so it is helping you by not violently changing the value of `this`. In JavaScript, `this` simply refers to the current scope, so if you write a function, `this` is that function. If you put a function inside it, `this` is inside that child function. Fat arrows keep the context of where called from – agm1984 Nov 03 '17 at 19:11
It allows you to nest function calls exactly like this and not have to worry about always remembering to attach `.bind(this)` on it. Look at devdanke's comment again and look how the only difference is `this.foo.bind(this)` vs. `() => this.foo()` – agm1984 Nov 03 '17 at 19:14
In 2019, this is the best answer now. – Harry12345 Jul 04 '19 at 11:01

score 53 · Answer 3 · answered Sep 20 '18 at 16:29

53

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.

answered Sep 20 '18 at 16:29

uruapanmexicansong

2,520
1
15
20

Care to share an example, how would one use an arrow function to solve this issue? – DJ Gruby Mar 10 '22 at 06:40

score 40 · Answer 4 · answered Nov 14 '15 at 15:29

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

score 16 · Answer 5 · answered May 30 '18 at 10:22

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

}

score 14 · Answer 6 · answered Sep 11 '19 at 14:04

14

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

answered Sep 11 '19 at 14:04

Pranav Kapoor

161
1
3

1

A great succinct solution – Chun Nov 14 '19 at 16:25
having same issue though used to call the method as an arrow function in the call, but I guess I have to implement the state function as such, and exactly what i have done – Carmine Tambascia Mar 21 '20 at 11:15

score 10 · Answer 7 · answered May 22 '17 at 14:54

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 => this.setState({ List: JsonList }));
    }

 //Above method equalent to this...
     componentWillMount() {
         ListApi.getList()
             .then(function (JsonList) {
                 this.setState({ List: JsonList });
             }.bind(this));
 }

Hemadri Dasari · Answer 8 · 2018-12-25T05:41:46.270

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

    VK.init(() => {
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},(data) => {
            if(data.response){
                that.setState({ //this available here and you can do setState
                    FirstName: data.response[0].first_name
                });
                console.info(that.state.FirstName);
            }
        });
    }, () => {
        console.info("API initialisation failed");

    }, '5.34');
 },

score 7 · Answer 9 · answered Mar 25 '18 at 20:29

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

score 6 · Answer 10 · answered Sep 21 '18 at 06:41

Here THIS context is getting changed. Use arrow function to keep context of React class.

        VK.init(() => {
            console.info("API initialisation successful");
            VK.api('users.get',{fields: 'photo_50'},(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');

score 3 · Answer 11 · answered Nov 29 '21 at 23:52

I have the same error of

TypeError: setState is not a function

but the cause is silly. Posting it as a response here to hopefully save people who might be making the same mistake.

Instead of

  const { state, setState } = React.useState(false);

Use

  const [ state, setState ] = React.useState(false);

Square brackets and not curly brackets!

score 2 · Answer 12 · answered Mar 08 '19 at 10:12

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.

score 1 · Answer 13 · answered Nov 22 '21 at 06:28

1

Use from arrow function to handle action.

answered Nov 22 '21 at 06:28

tohidmahmoudvand

235
2
12

score 1 · Answer 14 · edited Nov 26 '21 at 22:28

1

This is mainly incompatibility problem between react, react-dom, and enzyme.

Try install the following as I did to solve the problem:

[...]
    "react": "^18.0.0-beta-f320ef88f-20211116",
    "react-dom": "16.14.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6"
[...]

edited Nov 26 '21 at 22:28

Elikill58

3,190
22
17
38

answered Nov 26 '21 at 10:01

Sina Eft

11
1

score 1 · Answer 15 · answered Dec 16 '21 at 13:37

1

In my case, the problem was that I was sending the state and setstate as props to a child component but there was a typo in setstate

answered Dec 16 '21 at 13:37

HibaHasan

472
1
3
10

React this.setState is not a function

15 Answers15

Linked

Related