How to use setState inside callback: ReactJS

Question

Following is the code that I used to set the state.

handleAddNewQuiz(event){
    this.quiz = new Quiz(this.db, this.newQuizName, function(err, affected, value){
        if(!err){
            this.setState( { quiz : value});  // ERROR: Cannot read property 'setState' of undefined
        }
    });
    event.preventDefault();
};

Even though the database is created successfully, I cannot call this.setState, as it's always undefined.

I tried:

self = this;

handleAddNewQuiz(event){
    this.quiz = new Quiz(this.db, this.newQuizName, function(err, affected, value){
        if(!err){
            self.setState( { quiz : value});  // ERROR: self.setState is not a function
        }
    });
    event.preventDefault();
};

But it still fails, Also tried with a = this, and using a.setState, but still no luck.

How can I solve this?

use ()=> {} instead using function(){}.

Ved
– Ved

2017-04-07 10:33:01 +00:00
Commented Apr 7, 2017 at 10:33 — Ved
– Ved, Commented Apr 7, 2017 at 10:33

Mayank Shukla · Accepted Answer · 2018-02-02 07:25:48Z

20

You need to bind correct this (class context) with callback method, then only you will be able to access the class properties and methods.

Possible Solutions:

1- Use arrow function, like this:

 handleAddNewQuiz(event){
        this.quiz = new Quiz(this.db, this.newQuizName, (err, affected, value) => {
            if(!err){
                this.setState( { quiz : value}); 
            }
        });
        event.preventDefault();
    };

2- Or use .bind(this) with callback method, like this:

handleAddNewQuiz(event){
    this.quiz = new Quiz(this.db, this.newQuizName, function(err, affected, value){
        if(!err){
            this.setState( { quiz : value});  
        }
    }.bind(this));
    event.preventDefault();
};

The way you are using will also work, save the reference of this inside the handleAddNewQuiz method, like this way:

handleAddNewQuiz(event){
    let self = this;    //here save the reference of this
    this.quiz = new Quiz(this.db, this.newQuizName, function(err, affected, value){
        if(!err){
            self.setState( { quiz : value});  
        }
    });
    event.preventDefault();
};

edited Feb 2, 2018 at 7:25

answered Apr 7, 2017 at 10:31

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

3 Comments

ddeadlink Over a year ago

i would rather pick 1 and 2 variant cuz due to unnecessary usage of one more variable is not so good example

Mayank Shukla Over a year ago

@ddeadlink, i also used to prefer 1st and 2nd way, in 3rd way, i suggested him how to save reference in a third variable like he is using in his ques.

ddeadlink Over a year ago

tottaly understand what you were leading to, so i upvoted)

JiN · Accepted Answer · 2017-04-07 11:24:09Z

1

Mayank's answer is correct.. Alternatively you can use https://www.npmjs.com/package/core-decorators

and use the @autobind decorator before the function.

answered Apr 7, 2017 at 11:24

JiN

8281 gold badge8 silver badges15 bronze badges

1 Comment

tonywei Over a year ago

Thanks for your suggestion :)

Collectives™ on Stack Overflow

How to use setState inside callback: ReactJS

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related