Brtdku

I want to take data from JSON, next take another data from related JSON by ID and push it to my state array movies.

This is my code:

state = {

    movies: 

}



componentDidMount() {



    fetch('https://api.themoviedb.org/3/movie/popular?api_key=APIKEY&page=1')

        .then(response => response.json())

        .then(data => {

            const movies = data.results;



            movies.forEach(movie => this.moviePageAndGenres(movie.id, movie));



            this.setState({

                movies

            });

        })

}



moviePageAndGenres = (id, element) => {

    fetch('https://api.themoviedb.org/3/movie/' + id + '?api_key=APIKEY')

        .then(response => response.json())

        .then(data => {

            element.genres = data.genres;

            element.homepage = data.homepage;

        });

}

In render() I just console.log my movies to check if data inside is correct.

Output:
image

So it's correct but when I check Component Props these props are not transferred.

image

This is how I transfer props:

const movies = this.state.movies.map(movie =>

 <Movie genres={movie.genres}

        homepage={movie.homepage}

        key={movie.id}

        title={movie.title}

        poster={movie.poster_path}

        rating={movie.vote_average}

 />

)

I guess it's problem with multiple call of asynchronousfetch(). But i don't know how to handle with it.

The reason its not working is, you are firing multiple fetch calls which are async and setting the state immediately after it. setState will get empty movies in that case.

fetch api returns a promise and you should set your state in promise resolution handler. Modify your componentDidMount like this.

componentDidMount() {



  fetch('https://api.themoviedb.org/3/movie/popular?api_key=APIKEY&page=1')

      .then(response => response.json())

      .then(data => {

          const movies = data.results;

          Promise.all(movies.map(movie => fetch(

            `https://api.themoviedb.org/3/movie/${movie.id}?api_key=APIKEY`

          )))

          .then(resp => Promise.all( resp.map(r => r.json()) ))

          .then(result => {

            const movies = result.map((data, i) => {

              const movie = Object.assign(movies[i], {

                genres: data.genres,

                homepage: data.homepage

              });

              return movie;

            });

            this.setState({

              movies

            });

          });

      })

}

You need async await in this case and it’s good to use Promise.all because you are doing fetch in forEach.

For forEach you need await Promise.all and for fetch you need await. Which mean it will wait until the forEach is completed

Change

    fetch('https://api.themoviedb.org/3/movie/popular?api_key=APIKEY&page=1')

    .then(response => response.json())

    .then(data => {

        const movies = data.results;



        movies.forEach(movie => this.moviePageAndGenres(movie.id, movie));



        this.setState({

            movies

        });

    })

To

  fetch('https://api.themoviedb.org/3/movie/popular?api_key=APIKEY&page=1')

    .then(response => response.json())

    .then(async data => {

        const movies = data.results;

        await Promise.all(movies.forEach(async movie => await this.moviePageAndGenres(movie.id, movie)))



        this.setState({

            movies

        });

    })

Also

Change

  moviePageAndGenres = (id, element) => {

      fetch('https://api.themoviedb.org/3/movie/' + id + '?api_key=APIKEY')

    .then(response => response.json())

    .then(data => {

        element.genres = data.genres;

        element.homepage = data.homepage;

    });

 }

To

   moviePageAndGenres = async (id, element) => {

      return await fetch('https://api.themoviedb.org/3/movie/' + id + '?api_key=APIKEY')

    .then(response => response.json())

    .then(data => {

        element.genres = data.genres;

        element.homepage = data.homepage;

    });

 }