getting empty arrays when making a get request using axios

Question

Hi :) I'm trying to get an array of numbers from my api that returns me something like: [{"numbers":[9,7,56,58,48,18],"gameId":1},{"numbers":[3,8,10,60,35,5],"gameId":2},{"numbers":[39,24,33,26,48,55],

I'm using axios and everytime I make a request this is what happens: [] length: 0 [[Prototype]]: Array(0)

this is my code:

const[game,setGame]= React.useState([]);
var[myGameNumbers, setMyGameNumbers]=React.useState([]);

React.useEffect(()=>{
    axios.get("http://localhost:8080/games/game12").then((response)=>{
     setGame(response.data);
    });
  }, []);
  if (!game) return null;

function mappingNumbers(){
    game.map((game) => (
        setMyGameNumbers==game
    ));
    if(!myGameNumbers) return null; else console.log(myGameNumbers);
}

this is the button that triggers the function:

 <a href="#" className="button" onClick={mappingNumbers()}>
     <p className="bttn-p">GERAR NÚMEROS</p>
 </a>

I'm looking for a way to bring my array numbers, like this: [9,7,56,58,48,18] everytime I click on the button. If anyone knows how to help I'd be thankful :D

this is my full code if theres anything I've left out: https://github.com/vitoriaacarvalho/jogando-na-mega-sena/tree/main/front/jogando-na-mega

@FabrícioPinto the console only returns [] length: 0 [[Prototype]]: Array(0) — vitoriac
– vitoriac, Commented Jan 9, 2023 at 13:19
Maybe its a problem with your API, on your browser press F12 to open the dev tools, go to the Network tab, click on your button and see if your request appears on the list, if so click on it and confirm if the URL is correct, the headers and if the response has the JSON that you expected. — Fabrício Pinto
– Fabrício Pinto, Commented Jan 9, 2023 at 13:31
Probably not solving your issue but, your onClick should either be () => mappingNumbers() or mappingNumbers currently it will invoke immediately — RubenSmn
– RubenSmn, Commented Jan 9, 2023 at 13:44
@FabrícioPinto I tried this and apparently my back works fine! I believe my front logic is wrong :( — vitoriac
– vitoriac, Commented Jan 9, 2023 at 13:52

RubenSmn · Accepted Answer · 2023-01-09 19:43:06Z

2

In your mappingNumbers you map over the game and do some check == against the setMyGameNumbers function which will not work. The correct syntax will be something like setMyGameNumbers(game)

You also check if myGameNumbers does not exist but it will always exist since the initial value is an empty array [] this is why the console.log logs an empty array.

...

if (!game) return null;

// will log everytime when a state gets updated
// and if the above statement is false
console.log("myGameNumbers", myGameNumbers);

function mappingNumbers() {
  if (game.length < 1) return null;
  setMyGameNumbers(game);
}

Updated the onClick with a correct syntax

<a href="#" className="button" onClick={() => mappingNumbers()}>
  <p className="bttn-p">GERAR NÚMEROS</p>
</a>

edited Jan 9, 2023 at 19:43

answered Jan 9, 2023 at 18:53

RubenSmn

4,7622 gold badges12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

getting empty arrays when making a get request using axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related