React is driving me nuts, and my Twitch app has a couple problems I’m having trouble resolving and hoping someone can help point me in the right direction.
1.) The online status sometimes comes back as undefined. I suspect this is because I’m doing separate calls to get streams and channels, then updating status based on if a channel has a stream result, which depending on API responses could be inconsistent. So now I’m trying something like this, but…
// hit the API, get data
if (Array.isArray(channel)) {
for (var i = 0; i < channel.length; i++) {
getChannelData(`${baseUrl}/channels/${channel[i]}`);
getStreamData(`${baseUrl}/streams/${channel[i]}`);
}
}
console.log(channels) // returns array, length 7
console.log(channels.length) // returns 0 -- what?!
for (var i = 0; i < channels.length; i++) { // this never executes
if (streams.filter(stream => channels[i].game === stream.game).length) {
channels[i].channelStatus = 'Online';
}
else {
channels[i].channelStatus = 'Offline';
}
}
// channels is empty here, so state doesn't update
this.setState({ channels, streams });
2.) Similarly, the Channels
component is set up such that it should render an initial state displaying all Channel
components regardless of status, but a similar thing happens – the props are there right before the loop, but the loop to iterate through the channels never executes.
Source: https://github.com/alightedlamp/twitch-tv/tree/master/src
Can someone save me from my impending insanity?