React Project. Having an issue fetching data using parameter and getting infinite loops

Question

This project has multiple issues, that have really been causing me issues. Im going to post the API key for now incase anyone needs to try to accomplish this aslo, then ill be requesting a new API key from the API host.

So my issue is, Ive called a movie database API which gives me 20 trending movies of the week. I set that data to a state I called "trending". NO problem. Then I mapped trending and go a list of the movies ID#'s. I saved these to a state called "movieId". These id's are important because I need them for the final call to a different endpoint. it needs the moviesID to return data that gives me a link to where someone can buy or watch the movie. The list of links to each indvidual movie ID's provider is what my main goal is. I need these links so I can assign each movie it's provider link so the user can click the movie picture and be led to where they can watch the movie. I dont need to accomplish that yet though. FOr now, I just need the Links. Im trying this with the code below but all I get is infinite loops, type errors saying I US.link is not valid etc. Im doing something wrong but I dont know what it is, please help!

Here is the link to the sandbox ----> React Sandbox Project

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [trending, setTrending] = useState([]);
  const [movieId, setMovieId] = useState("");
  const [link, setLink] = useState("");
  // set trending to get the movies data.

  //set movieID to get the movie ID's

  //set link to get the providerlink that belongs to each movieID.

  useEffect(() => {
    const trendUrl =
      "https://api.themoviedb.org/3/trending/movie/week?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
    fetch(trendUrl)
      .then((response) => response.json())
      .then((data) => {
        setTrending(data.results);
      })
      .catch((error) => {
        console.log("Error!! Data interupted!:", error);
      });
  }, []);

  const Collection = () => {
    trending.map((item) => setMovieId(item.id));
  };
  Collection();

  function Linked() {
    const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;
    fetch(url)
      .then((res) => res.json())
      .then((res) => console.log(res.results.US.link));

    //Gives movie ID and adds it to properlink
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
```

Abraham · Accepted Answer · 2021-04-04 01:56:26Z

You have some issues of how you should use this approach in react which I will detail you below:

First issue that break your app is you are setting state inside a .map method in render lifecycle so you are calling everytime to re-render your component so it will never stop. If you need to store a list of ids you should do the following:

First remove movieId state as an array you don't nee to use it anymore.

 const [movieId, setMovieId] = useState("");

Then, you should modify your Collection function and just make a variable to store the list of ids using map on the following way:

const moviesIdCollections =  trending.map((item) => (item.id));

Now you will have you're app working again and you have your ids collections ready to use wherever you're going to use it inside your component.

Now if you want to list the detail of every movie I recommend you to build another component with a prop that receives the movie id and then call it in a useEffect hook as a I detail you in the following example:

    function MovieDetail(props) {
  const [movie, setMovie] = useState(null);
  const {id} = props;

  useEffect(()=>{
    getMovieDetail(id)
    .then((res) => res.json())
    .then((res) => setMovie(res));
  }, [id])
  
  return movie ? <code>{JSON.stringify(movie)}</code> : <p>Probably fetching data</p>;
  
}

I see that you are just getting start with react so I will recommend you to read the react lifecycle in docs. and the react way to how properly build components in react.

https://codesandbox.io/s/blazing-dawn-4w8b2?file=/src/App.js

Greetings I hope you're doing well.

Alot has clicked after this post and reading more into properly built components. thank you for your reply this has helped me so much!

Alejo Millo · Accepted Answer · 2021-04-04 00:42:54Z

The problem is your calling Collection() outside useEffect() and is constantly beeing called. You should make the call inside useEffect();

Check this out:

    import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [trending, setTrending] = useState([]);
  const [movieId, setMovieId] = useState("");
  const [link, setLink] = useState("");
  // set trending to get the movies data.

  //set movieID to get the movie ID's

  //set link to get the providerlink that belongs to each movieID.

  useEffect(() => {
    const trendUrl =
      "https://api.themoviedb.org/3/trending/movie/week?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
    fetch(trendUrl)
      .then((response) => response.json())
      .then((data) => {
        setTrending(data.results);
        Collection();
      })
      .catch((error) => {
        console.log("Error!! Data interupted!:", error);
      });
  }, []);

  const Collection = () => {
    trending.map((item) => setMovieId(item.id));
  };

  function Linked() {
    const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;
    fetch(url)
      .then((res) => res.json())
      .then((res) => console.log(res.results));

    //Gives movie ID and adds it to properlink
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={Linked}>SEE RESULTS</button>
    </div>
  );
}

Collectives™ on Stack Overflow

React Project. Having an issue fetching data using parameter and getting infinite loops

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related