Error when using a function that requests API data

Question

I'm working on this app that takes data from a movies API and I want to work with it. I have this function that gets the API data:

/** @format */

const fetchMovie = movie => {
  var APIKEY = "xxxxxxxxxxxxxxxxxxxxxx";
  var API2 =
    "https://api.themoviedb.org/3/search/movie?api_key=xxxxxxxxxx&language=en-US&page=1&include_adult=false&query=avengers";
  var API = `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&language=en-US&page=1&query=${movie}`;

  fetch(API2)
    .then(data => data.json())
    .then(movies => console.log(movies) || movies.items)
    .catch(error => {
      console.log(error);
      return null;
    });
};

export default fetchMovie;

And I have this App class that uses the API data:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeMovie: "Avengers",
      loading: true,
      allMovies: []
    };
  }

  componentDidMount() {
    this.getData(this.activeMovie);
  }

  componentDidUpdate(prevState) {
    if (prevState.activeMovie !== this.state.activeMovie) {
      this.getData(this.state.activeMovie);
    }
  }

  getData(movie) {
    this.setState({
      loading: true
    });

    fetchMovie(movie).then(data => {
      this.setState({
        allMovies: data,
        loading: false
      });
    });
  }

Now, before this I have used the same methodology and it worked but I don't know why the I get TypeError: Object(...)(...) is undefined // this line fetchMovie(movie).then(data => {

The API is good, I can console log the data before it gets to the App component, but the function in the app component somehow doesn't work. any clues?

Answer 1

You are not returning any promise from your fetchMovie function, that way you can't use the .then so right now you only have access to that data in your fetchMovie . A possible solution would be defining your function as async and then you would be able to return your data from that function.

Answer 2

Try this.

/** @format */

const fetchMovie = movie => {
  var APIKEY = "xxxxxxxxxxxxxxxxxxxxxx";
  var API2 =
    "https://api.themoviedb.org/3/search/movie?api_key=xxxxxxxxxx&language=en-US&page=1&include_adult=false&query=avengers";
  var API = `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&language=en-US&page=1&query=${movie}`;

  return fetch(API2)
    .then(data => data.json())
    .then(movies => console.log(movies) || movies.items)
    .catch(error => {
      console.log(error);
      return null;
    });
};

export default fetchMovie;

Answer 3

That's simply because your function fetchMovie() doesn't return a Promise so that you than use .then() after it. You can return a promise instead. However the logic in your code is probably a bit shaky. You might as well look that up because it goes into an infinite loop, consider debugging component life cycles for that.

To return a promise from your function, you can use a similar approach as I wrote in here: https://codesandbox.io/s/small-sun-sfcyv .