Question

这有效：

$.ajax({
    type: "POST",
    data: {"gender": "female"},
    url: "http://localhost/something.php",
    dataType: "json",
    success: 

        this.setState({
            someKey: someValue
        })

})

这不起作用（函数包装器导致this.setState丢失先前的this上下文）

$.ajax({
    type: "POST",
    data: {"gender": "female"},
    url: "http://localhost/something.php",
    dataType: "json",
    success: function(){     // function wrapper begins

        this.setState({
            someKey: someValue
        })
    }                       // function wrapper ends
})

第二种情况中的this证明是http://localhost/something.php

访问函数包装器中的前一个this上下文需要做什么？

Answer 1

为了保留当前this的上下文，您需要绑定success的回调函数。

最简单的方法是使用箭头函数语法：

success: () => {
    this.setState({
        someKey: someValue
    })
}

另一种选择是使用局部变量来存储该引用，并在成功时使用该变量：

var that = this;
$.ajax({
    type: "POST",
    data: {"gender": "female"},
    url: "http://localhost/something.php",
    dataType: "json",
    success: function() {
        that.setState({
            someKey: someValue
        })
    }
})

Answer 2

你需要在访问它之前调用super（），因为在调用super（）之前不会初始化它

在AJAX调用之后访问this.setState里面的成功回调

2 个答案: