Why is this async api call failing when I don't use a debugger?
09:53 10 Apr 2026

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 };
}
javascript reactjs react-hooks async-await