How to solve error: Can not use keyword 'await' outside an async function in React

Question

I want to dynamically grab the ip adress from this device (since it changes overtime) and then fetch the JSON from the database by using a link in fetch: https://{ipadress}:5000/users from node.js server. But now it gives me an error Can not use keyword 'await' outside an async function. I don't know how to solve it. The function publicIP() is where the problem is at.

async componentDidMount() {
            this.drawOnCanvas();
            var ipAdress = '';
            publicIP()
            .then(ip => {    
                console.log(ip);
                const url = "http://" + ip + ":5000/user";
                const response = await fetch(url);
                const data = await response.json(); 
                this.setState({userData: data});
                console.log(this.state.userData);
            // '47.122.71.234'
            })
            .catch(error => {
            console.log(error);
            // 'Unable to get IP address.'
            });

derpirscher · Accepted Answer · 2021-05-24 09:03:00Z

2

You shouldn't mix async/await with .then().catch(). Select the one you like better and stick with it. So in your case You should either do

componentDidMount() {
  this.drawOnCanvas();
  var ipAdress = '';
  return publicIP()
    .then(ip => {    
      console.log(ip);
      const url = "http://" + ip + ":5000/user";
      return fetch(url);
    })
    .then(res => {
      return res.json();
    })
    .then(data => {
      this.setState({userData: data});
      console.log(this.state.userData);            
    })
    .catch(error => {
       console.log(error);
    });
}

or

async componentDidMount() {
  try {
    this.drawOnCanvas();
    var ipAdress = '';
    const ip = await publicIP()
    console.log(ip);
    const url = "http://" + ip + ":5000/user";
    const response = await fetch(url);
    const data = await response.json(); 
    this.setState({userData: data});
    console.log(this.state.userData);
  } catch (error) {
    console.log(error);
  }
}

answered May 24, 2021 at 9:03

derpirscher

17.7k3 gold badges25 silver badges54 bronze badges

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

3 Comments

Yousaf Over a year ago

In the first code example, is the return before publicIP() needed?!

derpirscher Over a year ago

@Yousaf Depends. In case of a react componentDidMount() probably not (I'm not very familiar with react, so I may be wrong here). In general case if you want some method xy() to be part of a promise chain, yes, because otherwise this won't wait for the promise to resolve/reject

Yousaf Over a year ago

componentDidMount is a lifecycle method, that return is not needed here.

Ogod · Accepted Answer · 2021-05-24 09:04:42Z

1

Try it like this:

async componentDidMount() {
    this.drawOnCanvas();
    try
    {
        var ip = await publicIP();
        console.log(ip);

        const url = "http://" + ip + ":5000/user";
        const response = await fetch(url);
        const data = await response.json(); 
        this.setState({userData: data});
        console.log(this.state.userData);  // '47.122.71.234'
    } catch(error) {
        console.log(error);  // 'Unable to get IP address.'
    }
}

And additionally I think you should use either async/await OR .then/.catch but don't mix them.

answered May 24, 2021 at 9:04

Ogod

9581 gold badge8 silver badges16 bronze badges

5 Comments

dvid vid Over a year ago

Thanks! it worked. For some reason i get the wrong ip though, its different from when i type in command prompt ipconfig and go to ipv4. Any ideas to get the correct IP? So i can fetch it

Ogod Over a year ago

It seems that you want to call an endpoint on your local machine, right? So why can't you just use the fixed value 127.0.0.1 or localhost as your ip?

dvid vid Over a year ago

Well, I want to connect to this app from other computers as well. Because of that I need the local ip of the computer where i run the react app on. So that other computers can also fetch the json data

Ogod Over a year ago

OK but how should the other computers know the ip address of your host that is running your react app? I think you have to hard code the address in your consumers or do some routing (like editing hosts config to map an ip address to a dns name).

Ogod Over a year ago

And as far as I know React is just a client side technology. So you starting a local server on the machine which wants to use this frontend. This server just serves the JS and HTML files for the frontend. There is no backend service involved here. If you want to call a backend to fetch some data you need a backend technology as well (NodeJS, Java, ...).

Collectives™ on Stack Overflow

How to solve error: Can not use keyword 'await' outside an async function in React

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related