Twitch API使用Array.map（）以错误的顺序返回信息

Question

I'm calling the Twitch API (should mention I'm doing this in React) to get information on a few channels. I'm getting the data back, but it gets added to the array in the wrong order, different on every reload. Since I have two make two different calls, this ends up leaving me with mismatched information. I'm assuming it's because some calls take longer than other, and array.map() is running regardless if the first call was done yet, I'm just not sure how to fix that.

Here is my script:

export default class TwitchApp extends React.Component {
state = {
    games: [],
    statuses: [],
    names: [],
    logos: [],
    streams: ["nl_kripp", "ESL_SC2", "Day9tv", 
    "DisguisedToastHS" ]
};
findStreams = () => {
    const channels = this.state.streams;
    const statusUrls = channels.map((channel) => {
        return 'https://api.twitch.tv/kraken/streams/' + channel;
    }) 

    const infoUrls = channels.map((channel) => {
        return 'https://api.twitch.tv/kraken/channels/' + channel;
    })
    statusUrls.map((statusUrl)=> {
        let url = statusUrl;
        return $.ajax({
            type: 'GET',
            url: url,
            headers: {
                'Client-ID': 'rss7alkw8ebydtzisbdbnbhx15wn5a' 
            },
            success: function(data) {
                        let game;
                        let status = data.stream != null ? "Offline" : "Online";
                        this.setState((prevState)=> ( { statuses: prevState.statuses.concat([status]) } ) );
                        status = '';
            }.bind(this)
        });
    });
    infoUrls.map((url)=> {
        return $.ajax({
            type: 'GET',
            url: url,
            headers: {
                'Client-ID': 'rss7alkw8ebydtzisbdbnbhx15wn5a' 
            },
            success: function(data) {
                  let name = data.display_name != null ? data.display_name : 'Error: Can\'t find channel';
                  let logo = data.logo != null ? data.logo : "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F";
                  let game = data.game != null ? data.game : "Offline";
                  //let status = data.status != null ? data.status: "Offline";
                  this.setState((prevState)=> ( {  games: prevState.games.concat([game]), names: prevState.names.concat([name]), logos: prevState.logos.concat([logo]) } ) );
                  game = '';
                  logo = '';
                  name = '';
             }.bind(this)
        }); 
    }); 
};

Answer 1

You have really many options here...

1. could either look into AsyncJs and it is the async.series(); you are looking for, that will make all call go into specific order.

2. You could also go for a promised based HTTP requester, like Axios in which you can chain all your requests.

But really, I would go with the 3rd option which is that you make an array of objects as your state like this:

state = {
    info: {
        "nl_kripp": {
            game: '',
            status: '',
            name: '',
            logo: '',
        },
        "ESL_SC2": {
            game: '',
            status: '',
            name: '',
            logo: '',
        },
        "Day9tv": {
            game: '',
            status: '',
            name: '',
            logo: '',
        },
        "DisguisedToastHS": {
            game: '',
            status: '',
            name: '',
            logo: '',
        }
    },
    streams: ["nl_kripp", "ESL_SC2", "Day9tv", "DisguisedToastHS"]
};

and do something like this:

var streams = this.state.streams;
var fetchedArray = [];
fetchedArray.map(streams , stream => {
    let url = 'https://api.twitch.tv/kraken/streams/' + stream;
    return $.ajax({
        type: 'GET',
        url: url,
        headers: {
            'Client-ID': 'rss7alkw8ebydtzisbdbnbhx15wn5a' 
        },
        success: function(data) {
            var currentState = Object.assign({}, this.state.info[stream]);
            currentState.status = data.stream === null ? 'Offline' : 'Online';
            currentState.name = data.display_name;
            currentState.logo = data.channel.logo;
            currentState.game = data.game;
        }.bind(this)
    });
});

Now fetchedArray will hold the same information but stacked together and easily handle with javascript after, rather than unsorted arrays.