ReactJS SetState在递归$ .getJson中

Question

其实，

我试图从调用中获取结果并将其设置为状态，但它不起作用，我不明白为什么：

onButtonClick() {
 this.setState({Data: call(id, token)});
}


function call(Id, Token){
  var brand = Id;
  ReportTitle = brand;
  url = base_url + brand + "/posts?access_token=" + Token + request;
  var hasnext = true;
  return getNextAndConcatJSonOrNot(url, 0, finalJson);
}

在这个函数中，我在$ .getJSON中进行递归调用。

function getNextAndConcatJSonOrNot(urlToCall, cnt, jsonData){
  var jsonFinalObject = '';
  $.getJSON(urlToCall).done(function(data) {
      var tempJson = {};
      tempJson = jsonData.concat(data.data);
      jsonData = tempJson;
      cnt++;
      if(data.paging.next != "" && cnt < 2){
        getNextAndConcatJSonOrNot(data.paging.next, compteur, jsonData);
      } else {        
        return JSON.stringify(jsonData);
      }
  });
}

但每次返回''时，我都试图将.bind（this）放在$ .getJson的末尾并在内部执行setState但它不起作用。我首先尝试使用我的函数（除了onbuttonclick）在另一个file.js中，然后我尝试在组件中使用这些函数。

我能做些什么让这项工作好吗？谢谢。

Answer 1

你不能从.done返回数据，因为.done返回一个Promise。你应该传递一个回调，将状态设置为getNextAndConcatJSonOrNot并在.done中调用它。

handleResponse(data) {
  // bind this in your constructor.
  this.setState({ Data: data });
}

onClick() {
  var brand = Id;
  ReportTitle = brand;
  url = base_url + brand + "/posts?access_token=" + Token + request;
  var hasnext = true;
  getNextAndConcatJSonOrNot(url, 0, finalJson, this.handleResponse);
}

function getNextAndConcatJSonOrNot(urlToCall, cnt, jsonData, handleResponse){
  var jsonFinalObject = '';
  $.getJSON(urlToCall).done(function(data) {
    var tempJson = {};
    tempJson = jsonData.concat(data.data);
    jsonData = tempJson;
    cnt++;
    if(data.paging.next != "" && cnt < 2){
      getNextAndConcatJSonOrNot(data.paging.next, compteur, jsonData);
    } else {        
      handleResponse(jsonData);
    }
 });
}

这样的事情应该有效。

Answer 2

好的，在Max的答案的帮助下我找到了解决方案：

handleResponse(data, context) {
  // bind this in your constructor.
  context.setState({ Data: data });
}

onClick() {
  var brand = Id;
  ReportTitle = brand;
  url = base_url + brand + "/posts?access_token=" + Token + request;
  var hasnext = true;
  getNextAndConcatJSonOrNot(url, 0, finalJson, this);
}

getNextAndConcatJSonOrNot(urlToCall, cnt, jsonData, context){
  var jsonFinalObject = '';
  $.getJSON(urlToCall).done(function(data) {
    var tempJson = {};
    tempJson = jsonData.concat(data.data);
    jsonData = tempJson;
    cnt++;
    if(data.paging.next != "" && cnt < 2){
      getNextAndConcatJSonOrNot(data.paging.next, compteur, jsonData);
    } else {        
      context.handleResponse(jsonData, context);
    }
 }.bind(this));
}

解决方案是添加.bind（this）并在getNextAnd ...函数中传递“this”以获取handleResponse和setState的上下文。