React setState inside of a function this is undefined

Question

I'm new to react so I'm sure I'm missing something basic. I'm getting undefined for this, and therefore cannot read property 'setState' attempting to set state within the return of a function that calls fetch, what am I doing wrong? Note I call MyAction from an onClick and the response data is fine.

var ItemComponent = React.createClass({

    getInitialState: function() {
        return {
            the_message: "call that API!"
        };
    },

    doFetch: function() {
        var obj = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        };
        return fetch('http://localhost:1337/site/test', obj)
            .then(function(response) {
                return response.json();
            }).then(function(data) {
                return data;
            }).catch((error) => {
                console.error(error);
            });
    },

    MyAction: function() {
        this.doFetch().then(function(response){
            this.setState({
                the_message: response.message
            });
        })
    },

    render: function() {
        return (
            <div>
                <div>{this.props.title}</div><br></br>
                <div>{this.props.price}</div><br></br>
                <div onClick={this.MyAction}>{this.props.qty}</div>
            </div>
        );
    }
});

Possible duplicate of How does the "this" keyword work?

Andy Ray
– Andy Ray

2017-02-12 02:35:21 +00:00
Commented Feb 12, 2017 at 2:35 — Andy Ray
– Andy Ray, Commented Feb 12, 2017 at 2:35

Abdennour TOUMI · Accepted Answer · 2017-02-12 02:53:29Z

11

Use arrow function (() => {}) which keeps the last scope (this) as it is .

MyAction: function(){
    this.doFetch().then((response) => {
        this.setState({
            the_message: response.message
        });
    });
},

answered Feb 12, 2017 at 2:53

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

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

1 Comment

Amrit Over a year ago

what about function component, what will be the syntax then

Community · Accepted Answer · 2017-05-23 10:29:34Z

8

Your inner promise resolution function won't have this context. One way to fix it:

MyAction: function(){
    this.doFetch().then(function(response){
        this.setState({
            the_message: response.message
        });
    }.bind(this))
},

Read more about that on this StackOverflow question.

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Feb 12, 2017 at 2:34

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

2 Comments

edencorbin Over a year ago

Pefect, your secondly fixed it, I'm not sure what you are suggesting in your first item, as that's my code unchanged? In any case I'm accepting your answer as soon as it lets me (5 min). Side question, I should really be using ES6 syntax yeah? after getting started on some tutorials, I think this syntax is long toothed.

Andy Ray Over a year ago

Double whoops, I just assumed you were using ES6 classes, the first update was irrelevant. Please close your question as a duplicate.

Dan Heller · Accepted Answer · 2017-02-12 02:56:22Z

3

A simple .bind(this) would solve the issue:

render: function() {
return (
<div>
<div>{this.props.title}</div><br></br>
<div>{this.props.price}</div><br></br>
<div onClick={this.MyAction.bind(this)}>{this.props.qty}</div>
</div>
);

By adding .bind(this) you keep the scope within your function.

answered Feb 12, 2017 at 2:56

Dan Heller

5941 gold badge5 silver badges18 bronze badges

1 Comment

Isaac Pak Over a year ago

You create a new function on every render doing it like this. It's better to bind the handler in the constructor or create an arrow function inside the class.

Collectives™ on Stack Overflow

React setState inside of a function this is undefined

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related