I am trying to create a react app and I need it to call the MLB API to get a list of game IDs, then go to each game and get some play-by-play data. If I set a debugger anywhere in my function, I can see the data being gathered and processed the way I expect, but if I attempt to console.log it, it tells me that there was an error getting the gamePk, which leads me to assume it didn't properly await. What am I doing wrong?
export const useFetch = (dateToParse) => {
const [data, setData] = useState([]);
useEffect(() => {
async function getSplits() {
let tempData = [];
const url = `https://statsapi.mlb.com/api/v1/schedule?sportId=1&startDate=${dateToParse}&endDate=${dateToParse}&gameType=R&fields=dates,date,games,gamePk`;
const response = await fetch(url)
.catch(err => console.error(err));
const json = await response.json();
for (let i = 0; json.dates[0].games.length; i++) {
var gamePk = json.dates[0].games[i].gamePk;
const gameUrl = `https://statsapi.mlb.com/api/v1/game/${gamePk}/withMetrics?fields=liveData,plays,allPlays,result,rbi,matchup,batter,id,fullName,playEvents,offense,first,second,third,count,outs`;
const gameResponse = await fetch(gameUrl)
.catch(err => console.error(err));
const gameJson = await gameResponse.json();
const allPlays = gameJson.liveData.plays.allPlays;
var playResults = allPlays.map((play) => (
{
playerId: play.matchup.batter.id,
playerName: play.matchup.batter.fullName,
rbi: play.result.rbi,
runnerOnFirst: play.playEvents[play.playEvents.length - 1].offense.first !== undefined,
runnerOnSecond: play.playEvents[play.playEvents.length - 1].offense.second !== undefined,
runnerOnThird: play.playEvents[play.playEvents.length - 1].offense.third !== undefined,
outs: play.playEvents[play.playEvents.length - 1].count.outs
}
));
tempData = [...tempData, ...playResults];
}
setData(tempData);
}
getSplits();
}, [dateToParse]);
return { data };
}