Returning Null When Fetching API Asynchronously Before Data Fetches

user_17038266 0
Viewed 599

My Attempt

I'm attempting to fetch an API multiple times and put the data into a table. As a result, I'm calling an API several times. I'm trying to make it so if the data for a certain year is there, it fills a table, but if not, nothing is shown. If the data is there for all years, it loads and fills in the table just fine, but if not it breaks. Here's what I'm working with.

MAIN.JS

 <table>
     <thead>
             <tr>
                    <th>Season</th>
                     <th>GP</th>
                  </tr>
               </thead>
                <tbody>
                        <SkaterTableStats season={currentSeason} id={props.id} />
                         <SkaterTableStats season={prevSeason} id={props.id} />
                 </tbody>
             </table>

SKATERTABLESTATS.JS

import React, {useState, useEffect} from 'react'

function SkaterTableStats(props) {

    const [playerStat, setPlayerStat] = useState(null);
    useEffect(() => {
    getInfoData();

async function getInfoData() {
    const statx = await fetch(`https://statsapi.web.nhl.com/api/v1/people/${props.id}/stats?stats=statsSingleSeason&season=${props.season}`)
    .then(response => response.json());
    setPlayerStat(statx);
    }
}, []);


if (playerStat) { 
return (
    <tr>
    <td>{playerStat.stats[0].splits[0].season}</td>
    <td>{playerStat.stats[0].splits[0].stat.games}</td> 
</tr>    
)} else {
    return (null)
  }
}

export default SkaterTableStats

Unfortunately, when loading the API, it always brings up something, which is usually the sport's copywrite et al, but no stats.

What Usually Happens

-Calls Data

-If the player has played x amount of years, data fills no problem

-If player hasn't played x amount of years, data fills until it gets to that year, and then breaks, saying playerStat.statsEtc is undefined. I want it to return nothing.

What I've Tried

I've tried putting an if statement in the return statement, a la:

if (playerStat) {
return (
etc
) 
}

But because it's async, it loads that before the data loads, and breaks. Same for:

if (!playerStat.stats[0].splits[0].stat.timeOnIce > 0) {
return etc

&

if (playerStat == undefined) {
return etc

But neither have worked.
I would have liked to put the returning data into a table but the table is formatted oddly and React requires whatever returns to be in one enclosing div, which in this case is the . But if I put another div or anything similar it breaks the tables and places all the info in the one column.

Any help is appreciated, and I will happily clarify anything that needs clarifying. Thanks.

reactjs html javascript
1 Answers

It's best to not use both async/await and then/catch.

Try to change your function to use then/catch only, so simply put that in useEffect with empty dep array

 fetch(`https://statsapi.web.nhl.com/api/v1/people/${props.id}/statsstats=statsSingleSeason&season=${props.season}`)
    .then(response => response.json())
    .then(response => setPlayerStat(response);

maybe put some consolelogs in .then(), try to figure out what is the answer you're getting, try rebuilding it back to use async/await only and check what happens there.

Check props you're getting, maybe there is something wrong? Feel free to provide further info if the above won't work.

Also try to not call functions before their declarations :)

user_171446870
Related