在 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 上下文呢？

- thanks_in_advance

---

在函数之前，您需要为其添加一个范围的引用。因此，使用var self = this;并使用self.setState。 - iSZ

尝试使用箭头函数自动绑定 this 上下文：success: ()=> { this.setState({someKey: someValue}) } - Dekel

@ Dekel 如果您将其发布为答案，我将标记它为正确。我简直不敢相信箭头语法起作用了！我知道它可以自动绑定上下文，但我没想到它甚至在这种情况下也能起作用。 - thanks_in_advance

@iSZ，你的答案很好用！不过我还是喜欢Dekel的回答。谢谢你的解答！ - thanks_in_advance

很高兴能帮助到你 :) - Dekel

@thanks_in_advance 酷毕不了业 - iSZ

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

- Dekel

Answer 2

在访问此内容之前，您需要先调用super()，因为此内容在调用super()之前不会被初始化。

- Vinny

---

Super与this的绑定无关，仅在构造函数中使用，在那里您永远不应该使用ajax或任何异步。 - David Mårtensson