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?

Aquib · Accepted Answer · 2020-01-26 18:26:38Z

1

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.

answered Jan 26, 2020 at 18:26

Aquib

1451 silver badge11 bronze badges

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

Comments

user9227001 · Accepted Answer · 2020-01-26 18:20:48Z

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.

answered Jan 26, 2020 at 18:20

user9227001

1 Comment

Aquib Over a year ago

Exactly, check out the link above.

Sohail Ashraf · Accepted Answer · 2020-01-26 18:23:09Z

1

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;

answered Jan 26, 2020 at 18:23

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

Error when using a function that requests API data

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related