React: return an API result from a function with fetch and add to variable?

Question

I have this code example:

function getGameState() {
    return(fetch("http://localhost:8080/game_state"))
        .then(resp => resp.json())
        .then(data => {
            return data;
        });
};

I'm calling it from another function, like so:

function Game() {
    const gmState = getGameState()
    console.log(gmState);
}

The console output is as follows:

Promise {<pending>}

When I open up the arrow icon in the console, I see this:

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
available: null
board: Array(1)
0: {player: 1, x: 1, y: 0}
length: 1
[[Prototype]]: Array(0)
player_turn: 2
[[Prototype]]: Object

I need to pull the data from player_turn and board so I can pass those pieces to other functions.

The only examples I've found show console.log in the last .then, which I'm able to accomplish. I tried using async and await and many variations on this. I'm not able to find any working examples, and I'm starting to wonder if this sort of pattern is possible in React.

Junius L · Accepted Answer · 2022-01-26 01:49:17Z

1

Use async/await to fulfill the promises

async function Game() {
  const gmState = await getGameState()
  console.log(gmState);
}

answered Jan 26, 2022 at 1:49

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

3 Comments

dizzystar Over a year ago

I'm seeing this, but this, once again, doesn't allow me to do anything but console.log. That's the issue I'm having. I can't do anything with it besides log. I want to pull the data out of it and do something with it. It is possible to organize code like this?

Junius L Over a year ago

what do you want to do?

dizzystar Over a year ago

I want to assign the result to a variable in the other function. the result has data I need to pass to another function to use in it.

Collectives™ on Stack Overflow

React: return an API result from a function with fetch and add to variable?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related