CODEWITHSUNDEEP
javascriptreactjsapiasync-awaitaxios
pksasso
pksasso

Reputation: 429

ReactJS: Axios' async request is returning 'undefined'

I'm doing a little project using the movie DB API is ReactJs, and I have problems to use async functions, i'm making the api calls in many parts of projects an worked in all of them, but now it's not working.

My axios config:

export default axios.create({
  baseURL: 'https://api.themoviedb.org/3/',
  params: {
    api_key: process.env.REACT_APP_API,
  },
});

In my container I have this

const { setMenuSelected } = useContext(MovieContext);
const [movie, setMovie] = useState({})
const [recommendations, setRecommendations] = useState([]);
const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
  animateScroll.scrollToTop({ smooth: true });
  setMenuSelected('');
  getMovieRecommendations(setRecommendations, match.params.id, setIsLoading);
  setMovie(getMovieDetails(match.params.id, setMovie));
}, [match.params.id, recommendations, isLoading]);

I'm fetching the data in other file just to organize the project

export const getMovieRecommendations = async (
  setRecommendations,
  movieId,
  setIsLoading) => {
  const res = await api.get(`/movie/${movieId}/recommendations`);
  setRecommendations(res.results);
  setIsLoading(false);
}

And to render the movie list I'm passing the recommendations to my component that only use map to render each movie,

<MovieList header={'Recommentadion'} movieList={recommendations} />

But the app allways crash saying "Cannot read property 'map' of undefined", i looked in the network properties in the chrome and my request is finishing with no erros.

Update:

return of console.log(JSON.stringify(res)) I removed the results itens so it wouldn't get too big

{
  "data":{
    "page":1,
    "results":[
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {},
      {}
    ],
    "total_pages":2,
    "total_results":40
  },
  "status":200,
  "statusText":"",
  "headers":{
    "cache-control":"public, max-age=14400",
    "content-type":"application/json;charset=utf-8",
    "etag":"W/\"56ca661f28e43dc3dd2ce41816b517c5\""
  },
  "config":{
    "transformRequest":{

    },
    "transformResponse":{

    },
    "timeout":0,
    "xsrfCookieName":"XSRF-TOKEN",
    "xsrfHeaderName":"X-XSRF-TOKEN",
    "maxContentLength":-1,
    "headers":{
      "Accept":"application/json, text/plain, */*"
    },
    "method":"get",
    "baseURL":"https://api.themoviedb.org/3/",
    "params":{
      "api_key":"fe5b485ed12153ca357c3275cfad6c5c"
    },
    "url":"https://api.themoviedb.org/3/movie/399121/recommendations"
  },
  "request":{

  }
}

Upvotes: 2

Views: 851

Answers (3)

Reza Hashemi
Reza Hashemi

Reputation: 520

I think this help you. you should export your axios config like this:

const APIClient = axios.create({
  baseURL: 'https://api.themoviedb.org/3/',
  params: {
    api_key: process.env.REACT_APP_API,
  }
});

export default APIClient;

and then import it to fetch data in another file:

import  APIClient  from "YOUR AXIOS CONFIG FILE";

  export const getMovieRecommendations = async (movieId) => {
  const { data } = await APIClient.get(`/movie/${movieId}/recommendations`);
  return data;
}

In your container set this:

const { setMenuSelected } = useContext(MovieContext);
const [movie, setMovie] = useState({})
const [recommendations, setRecommendations] = useState([]);
const [isLoading, setIsLoading] = useState(true)

const getList=async(movieId)=>{
const res = await getMovieRecommendations(movieId);
  setRecommendations(res.results);
  setIsLoading(false);
}

useEffect(() => {
  animateScroll.scrollToTop({ smooth: true });
  setMenuSelected('');
  getList(match.params.id);
  setMovie(getMovieDetails(match.params.id, setMovie));
}, [match.params.id, recommendations, isLoading]);

Upvotes: 0

Omer
Omer

Reputation: 3466

Explain axios.create & Example

axios.create is for initial.. (config)

const axios = Axios.create({ withCredentials: false/true });

Now, create a function using axios like that:

function get(...args) {
  return axios.get(...args)
}

and call as you write:

const res = await get(`/movie/${movieId}/recommendations`);

Upvotes: 1

Lucas Raza
Lucas Raza

Reputation: 549

Try doing:

const res = await api.get(`/movie/${movieId}/recommendations`);
console.log(JSON.stringify(res));

This will print the whole JSON object into a string in the console. Since you're getting undefined and no error, you are most likely accessing the JSON object incorrectly. By printing out the contents this will show you what your JSON object looks like so you can get to the 'results' property successfully.

Upvotes: 1

Related Questions