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装饰器。

如何在回调内执行setState：ReactJS

2 个答案: