trying to fetch data with fetch and promise, doesnt work (react)

Question

I'm trying to get data out of an API with fetch, I can console.log the result in the fetch but out of the fetch I can't reach the data.

So I got this fetchData.js file with the function in it:

export const fetchData = (url) => {
    
    return fetch(url)
        .then(response => response.json())
        .then(result => console.log(result))
        .catch(error => console.log('error', error))
}

and then in the app.jsx file I call the function like this:

import { fetchData } from "./fetchData";

const URL = "https://pokeapi.co/api/v2/pokemon"

function App() {
  let data = fetchData(URL);
  console.log(data);

//return etc

But the console.log(data) keeps saying "undefined".

Can somebody please help me?

You're calling an async function and then not waiting for it to return before checking its value. — Daniel Beck
– Daniel Beck, Commented Mar 4, 2021 at 20:00
Does this answer your question? How do I return the response from an asynchronous call? — chazsolo
– chazsolo, Commented Mar 4, 2021 at 20:01
That's true, but he should have seen a Promise in the log. Try removing the second then, i.e. .then(result => console.log(result)). It's returning undefined — user2740650
– user2740650, Commented Mar 4, 2021 at 20:02

T J · Accepted Answer · 2021-03-04 20:06:28Z

1

You have to wait for the asynchronous action to complete before logging it.

let data = fetchData(URL).then(() => {console.log(data);});

(also either remove then(result => console.log(result)) or return result from it)

edited Mar 4, 2021 at 20:06

answered Mar 4, 2021 at 20:00

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

1 Comment

bosman2 Over a year ago

this will give me an error "App.jsx:26 Uncaught TypeError: Cannot read property 'then' of undefined"

lissettdm · Accepted Answer · 2021-03-04 20:22:44Z

1

fetchData is an async function, that is why the console.log is executed before fetchData is resolved:

export const fetchData = async (url) => {  
    return fetch(url)
        .then(response => response.json())
        .then(result => (result)) //--> data
        .catch(error => console.log('error', error))
}

then in component, inside useEffect:

function App() {
  const [data, setData] = useState([]) //--> keep data in component state
  
  useEffect(()=> {
     fetchData(URL) //--> fetch data when component is mounted
      .then(response => setData(response))
  }, []);
  //...
}

edited Mar 4, 2021 at 20:22

answered Mar 4, 2021 at 20:17

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

2 Comments

bosman2 Over a year ago

aah yes this is working! only weird thing is when i put {data} in the return its gives an error but console.log(data) is working ? Uncaught Error: Objects are not valid as a React child (found: object with keys {devices}). If you meant to render a collection of children, use an array instead.

lissettdm Over a year ago

How are you render the content? check if data has the format that you are expecting

Parimal Mehta · Accepted Answer · 2024-02-04 08:52:20Z

0

Another approach:

Change .then(result => console.log(result)) to .then(result => {return result})
fetchData(URL).then((data) => {console.log(data);});

The returned result will be put in data which can then be logged.

answered Feb 4, 2024 at 8:52

Parimal Mehta

13 bronze badges

Collectives™ on Stack Overflow

trying to fetch data with fetch and promise, doesnt work (react)

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related