ReactJS：在.map（）语句后执行带有Ajax调用的代码

Question

I'm stuck at a problem with my twitch tv api app for freecodecamp.

I have a .map() statement with an ajax call in it. And I push the data I get from the call into an array.

I want to set the state of the app to the array after the whole .map() loop is finished but somehow the Array is always empty when I access it outside of .map()

Here is the code I tried.

getData() {
  let tempArray= [];
  let self = this;
  STREAMER.map(function(streamer, i) {
    $.ajax({
      url: URL + streamer,
      success: (data) => {
        tempArray.push(data);
      },
      dataType: "jsonp"
    })
  });
  this.setState({data: tempArray});
}

I got the feeling that the problem is that the ajax call is asynchronous obv. But I thought since I call the this.setState() method outside of the .map() loop which should be synchronous everything should be fine but isn't.

The Ajax call isn't the problem btw. If I log the data inside of the success method everything is exactly how I like it.

Any Ideas?

Answer 1

Use your .map() call to return the promises from all the $.ajax() calls. You can then use $.when() to wait for them to complete:

getData() {
  let tempArray= [];
  let self = this;
  $.when.apply($, STREAMER.map(function(streamer, i) {
    return $.ajax({
      url: URL + streamer,
      success: (data) => {
        tempArray.push(data);
      },
      dataType: "jsonp"
    })
  }).then(function() {}
    self.setState({data: tempArray});
  });
}

The returned promises will be gathered up into an array by .map() . The returned array is then passed via .apply() into $.when() . That'll manage waiting for all the promises, and your .then() callback will be invoked when they're all done.

If it's at all possible, I suggest you look into the possibility of doing the iteration work at the server and providing a single HTTP API that processes a group of items and returns an aggregate result. HTTP requests take time, and browsers will only do a limited number of them concurrently. One issue in particular with this approach is that the order of the "temp" array will not necessarily match the order of the original array. That is, when the process is done, tempArray[2] may or may not contain the result from the ajax call for STREAMER[2] . There's no guarantee that the HTTP requests will complete in the order that they were issued; in fact if you're doing more than a few, then it's very very likely that they'll complete out of order.

Answer 2

SIMPLE SOLUTION

The setState() function should be called inside the success callback of async ajax request.

getData() {
  let tempArray= [];
  let self = this;
  STREAMER.map(function(streamer, i) {
    $.ajax({
      url: URL + streamer,
      success: (data) => {
        tempArray.push(data);
        if(i === STREAMER.length - 1) {
          self.setState({data: tempArray});
        }
      },
      dataType: "jsonp"
    })
  });
}

USE PROMISE

When all ajax requests are successful, resolve the Promise and setState inside resolve() .