Question

我正在尝试解决以下问题：
我的组件中有两种方法：
getData请求数据并获得结果准备好的大致时间。
我想要为该延迟设置setTimeout，然后将请求id传递给方法processData，这使得另一个请求使用从我尝试访问的requestData获取的请求ID来检索实际数据。
我无法在ajax的成功中从setTimeout中引用processData。怎么做？我试过这个.processData，this.refs。，processData没有成功。

var Component = React.createClass({
processData: function(id) {
 // ajax gets the data using the id (which we got from sending the request in requestData)
},
requestData: function(colid) {
$.ajax({
            url: "/api/getvalues/id/"+colid,
            type: "GET",
            cache: false,
            dataType: 'json',
            success: function(data) {
                setTimeout(function() {this.refs.processData(data.id);}, data.estimatedWaitTime+250);
            }
});
}
});

Answer 1

如果您想使用组件的上下文（例如this），那么您必须bind任何回调中的上下文。否则，this将改变其含义：

requestData: function(colid) {
$.ajax({
            url: "/api/getvalues/id/"+colid,
            type: "GET",
            cache: false,
            dataType: 'json',
            success: function(data) {
                setTimeout(function() {this.refs.processData(data.id);}.bind(this), data.estimatedWaitTime+250);
            }.bind(this)
    });
}

对于您的示例，为了隧道上下文到setTimeout回调，您需要绑定ajax回调和setTimeout回调

Answer 2

在setTimemout

之前将 this 分配给另一个本地变量（例如 _this ）

success: function(data) {
   var _this = this;
   setTimeout(function() {//.....use _this here ......}, data.estimatedWaitTime+250);
}

在setTimeout内强行这个表示窗口

参考Pass correct "this" context to setTimeout callback?

从setTimeout中调用React组件方法

2 个答案: