reactjs - AJAX 调用后在成功回调中访问 this.setState

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的上下文，您需要绑定(bind)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
        })
    }
})