如何在回调中执行 setState：ReactJS

Question

以下是我用来设置状态的代码。

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

即使数据库创建成功，我也无法调用this.state，因为它始终未定义。

我试过了：

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

但是还是失败了，用a = this试过，用a.setState，还是不行。

我该如何解决这个问题？

Answer 1

您需要将正确的this（类上下文）与回调方法绑定，然后才能访问类属性和方法。

---

可能的解决方案：

1- 使用arrow function，像这样：

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

2-或者使用.bind(this)和callback method，像这样：

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

你使用的方式也可以，将this的引用保存在handleAddNewQuiz方法中，像这样：

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

Answer 2

Mayank 的回答是正确的.. 或者，您可以使用 https://www.npmjs.com/package/core-decorators

并在函数之前使用@autobind 装饰器。