Async useEffect does not work for fetching data [duplicate]

Question

This is the code snippet:

  useEffect(() => {
    async function fetchData() {
      const url = 'https://api.randomuser.me';
      const response = await fetch(url);
      console.log('response: ', response);
    }
    fetchData();
  }, []);

as you can see, it is an useEffect hook, calling a public API for some data, using async await in order to wait for the response.

But the logged data isn't containing what it should.

This is in console.log:

body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://api.randomuser.me/"
__proto__: Response

what's wrong?

add await response.json() to get the data.

Brian Thompson
– Brian Thompson

2021-05-24 18:56:50 +00:00
Commented May 24, 2021 at 18:56 — Brian Thompson
– Brian Thompson, Commented May 24, 2021 at 18:56
That's a Response object.

Thomas
– Thomas

2021-05-24 19:03:23 +00:00
Commented May 24, 2021 at 19:03 — Thomas
– Thomas, Commented May 24, 2021 at 19:03

Naren · Accepted Answer · 2021-05-24 19:00:19Z

2

You need to parse the response in to JavaScript object, using response.json()


  useEffect(() => {
    async function fetchData() {
      const url = 'https://api.randomuser.me';
      const response = await fetch(url);
      const result = await response.json()
      console.log('result: ', result); // this the actual json response
    }
    fetchData();
  }, []);

answered May 24, 2021 at 19:00

Naren

4,5293 gold badges20 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Async useEffect does not work for fetching data [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related