0

Trying to create a small op.gg like app.

Basically what im trying to do is to find a way of grabbing data from each match and being able to display it. I was able to grab that data and print it to the console but cannot find a way to store into a state array or have an efficient way to update the state array in order to display it in order onto the web.

As you can see, I made an api call to grab a list of match id's which i then use to do another api call grab the data from each one of those matches. I used a bottleneck since the rate limit is 10 request per second.

   loadPlayerMatchData(puuid) {
        var API_KEY = MYRIOTAPIKEY
        const limiter = new Bottleneck({
            minTime:500
        })
        const throttleGetMatchData = limiter.wrap(getMatchesInformation)

        axios.get("https://americas.api.riotgames.com/tft/match/v1/matches/by-puuid/"+puuid+"/ids"+"?api_key=" + API_KEY).then((res) => {
            console.log(res.data)//match IDS

            res.data.map((id)=> {
                  
                throttleGetMatchData(id)//calling function with a bottleneck throttle
            })
        }).catch((errs)=> {
            console.log(err)
        })

        function getMatchesInformation(id) {
            axios.get("https://americas.api.riotgames.com/tft/match/v1/matches/"+ id +"?api_key=" + API_KEY).then((res) => {
                console.log(res.data)

                //PROBLEM STARTS HERE!!!!
                
                //******this.state.playerMatchInfo.push(res.data) <--- wont let me do this
               //return(res.data)<---- returns unfulfilled promises



            }).catch((err)=> {
                console.log(err)
            })
           
        }
        
    }

You can see that I'm doing all of this inside a react hook. I cant seem to use state arrays either inside a local function (getMatchesInformation) within the hook.

In conclusion im trying to see if i can pull off somehow saving data into an array like this.state.matches = []

Would using redux help solve this issue?

Manny
  • 25
  • 4

1 Answers1

0

Your data needs time to come back. You can use async-await to solve the problem

async function getMatchesInformation(id) {
    const res = await axios.get("https://americas.api.riotgames.com/tft/match/v1/matches/"+ id +"?api_key=" + API_KEY)
    this.state.playerMatchInfo.push(res.data)
   
}
Buddy Bob
  • 5,829
  • 1
  • 13
  • 44
  • Does this not work? – Buddy Bob Jun 15 '22 at 03:05
  • I didn't dislike the answer, but i cant call this.state.playerMatch under the function for some reason, it gives an undefined error saying that it doesn't exist – Manny Jun 15 '22 at 03:57
  • you need to define the state somewhere? – Buddy Bob Jun 15 '22 at 04:37
  • I already have it defined as constructor(props){ this.state ={playerMatchInfo:[]}}, creating the async function inside the hook function for some reason doesn't let me have access to state variables – Manny Jun 15 '22 at 05:30
  • So it does work! Just checked, the promise was fulfilled! Thanks – Manny Jun 16 '22 at 04:00