React - Returning data from API

Question

I know there are similar questions, but I can't find the answer.

First, please tell me if I'm doing something really wrong

I need to populate my state with data from an API call. This was working fine with code above:

export const GetPlanets = async () => {

    const planets = await axios.get(`${BASE_URL}`).catch((e) => {
            console.error(e);
        })

  return planets.data.results
}

But then I needed to make a second call to several links from one json response filed, and I managed to make it work (don't know if it is the correct approach, though)

const GetPlanets = async () => {
    let planetas = {}

   await axios.get(`${PLANETS_URL}`)
    .then((p) => {

        planetas = p.data.results

        return axios.get(`${FILMS_URL}`)
    }).then((f) => {

   planetas.films.forEach((v, i) => {
              planetas[i].film = f
        })
     })

        })
        .catch((e) => {
            console.error(e);
        })

    return planetas
}

This is my component file, where I try to get the object, like I was doing before

useEffect(() => {
    const fetchPlanetas = async () => {  // ME TRYING...
      const planetas = await GetPlanets()
      setPlanetas(planetas)
      setToShow(planetas[0])
    };
    fetchPlanetas()
  }, [])

But all I get is undefined

In your first code block you assign the result of the data fetch to a const called planets, but then return planetas.data.results, but planetas is not declared in that scope. I'm assuming that that is a typo? If not, it is a likely clue as to the issues you are seeing... — Alexander Nied
– Alexander Nied, Commented Jul 16, 2019 at 0:49
firstly, I'd recommend migrating to fetch, and the whatwg-fetch polyfill. there's not really a need for axios or any other libraries that try to figure out the mess that is AJAX any more. especially if you're using ES6 concepts like const and let — Sampson Crowley
– Sampson Crowley, Commented Jul 16, 2019 at 1:32
with fetch json is as simple as const response = await fetch('my_url'); const result = await response.json() — Sampson Crowley
– Sampson Crowley, Commented Jul 16, 2019 at 1:32
a teacher said axios is being largely used by companies (at least in my country), that's why I'm using it — nanquim
– nanquim, Commented Jul 16, 2019 at 2:02

khan · Accepted Answer · 2019-07-16 01:29:43Z

2

You're getting an array of undefined because .map() needs a return value. In both your .map() callbacks, you are not returning anything.

const results = [1, 2, 3, 4]
const results2 = results.map(elem => {
    elem = elem + 1
})
console.log(results2)

But, even if you did return something in your .map() callback, GetFilms(f) is asynchronous, so you would not get the results of GetFilms() mapped into the array as you would expect.

You have a couple of options:

If you have access to the API, send the films data along with the rest of the data when you do your first request.
Use async/await and Promise.all() to get responses.

answered Jul 16, 2019 at 1:29

khan

1,46410 silver badges20 bronze badges

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

3 Comments

nanquim Over a year ago

so, there is no way I can "append" films to planets response/object like I'm trying?

khan Over a year ago

I am unsure what you desired output is and what you data structure looks like, but I'm sure there is a way to solve this.

nanquim Over a year ago

yes, it works now, I updated the question. thank you

Collectives™ on Stack Overflow

React - Returning data from API

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