javascript - 获取所有类型的电影

Question

我正在使用 ReactJS 和 TMDb API 制作一个电影应用程序，我想按流派获取电影，并将它们显示在我的主页中，为此我创建了一个方法 initHorrorMovies() 谁:

• 对某种电影执行 axios TDMb API 请求 https://developers.themoviedb.org/3/discover/movie-discover

• 使用新数据更改状态 horrorMoviesList

问题是有很多流派，所以我将创建与流派一样多的函数和状态。

我正在考虑创建一个 movieList 对象，其中包含每种类型的 tmdb 查询结果以及该类型的标题，然后更新 movieList > 说明该对象。

你对我有什么建议吗？

我试过了

 class App extends Component {

    constructor(props){
       super(props);

       this.state = {
          movieListWithGenre:[],
       }
    }

    componentWillMount() {
       this.initGenreMovie();
     }

     initGenreMovie(){
       axios.get(LINK_GENRES).then(function(response){
            this.initListMovie(response.data.genres)
       }.bind(this));
     }

     initListMovie(GenreList){
        this.setState({ moviesList: this.state.moviesList.push(newMovies)});

        GenreList.map((element) => {

     axios.get(`${API_END_POINT}discover/movielanguage=en   
        &with_genres=${element.id}
        &include_adult=false&append_to_response=images
        &${API_KEY}`).then(function(response){
            this.setState({movieListWithGenre:this.state.movieListWithGenre.
            push(response.data.results)})
         }.bind(this));
      }) 
    }
  }

编辑

您好，我允许自己返回该帖子，因为我开发了一个有效的解决方案，我可以使用 TMDB API 请求获取按类型排序的电影列表。

我的解决方案有效，但启动应用程序时有很多延迟，因为我认为该过程很繁重，性能受到损害。

这是我的代码，我可以提供一些改进此代码的技巧吗？我预先感谢您的回答。

class App extends Component {

constructor(props){
    super(props);

       this.state = {
           defaultgenre:28,
           movieListWithGenre:[],
           genreList:[],
           genreId:[],
           genreTitle:[]
         }
       }

       componentDidMount() {
           this.initGenreMovie();
        }

        initGenreMovie(){
            axios.get(`${LINK_GENRES}`).then(function(response){
                 this.initListMoviesWithGenre(response.data.genres)
            }.bind(this));
        }

        initListMoviesWithGenre(genres){
            genres.map((genre) => {
               axios.get(`${API_END_POINT}${POPULAR_MOVIES_URL}&${API_KEY}`)
               .then(function(response){
                  let movies = response.data.results.slice(0,14);
                  let titleGenre = genre.name;
                  let idGenre = genre.id;

                  this.setState({movieListWithGenre:[...this.state.movieListWithGenre, movies]});
                  this.setState({genreTitle:[...this.state.genreTitle, titleGenre]});
                  this.setState({genreId:[...this.state.genreId, idGenre ]});

               }.bind(this));
            })
          }

          render(){

             const renderVideoListGenre = () => {
                 if(this.state.movieListWithGenre) {
                    return this.state.movieListWithGenre.map((element,index) => {
                    return (
                        <div className="list-video">
                            <Caroussel 
                                key={element.name} 
                                idGenre {this.state.genreId[index]} 
                                movieList={element} 
                                titleList={this.state.genreTitle[index]}
                             />
                        </div>
                      )
                  })
               }
            }

           return (
             <div>
                {renderVideoListGenre()}
             </div>
           )
    }

    export default App

Answer 1

一旦您发现了您想要的所有流派 ID，您就可以开始进行 axios 调用

https://api.themoviedb.org/<GENRE_ID>/genre/movie/list?api_key=<API_KEY>&language=en-US

您可以为所有类型创建一个函数或将它们分开，但应该在构造函数中调用。一旦你的 axios 调用返回，你就可以将电影数据放入你的状态中，如下所示:

this.setState({ moviesList: this.state.moviesList.push(newMovies) });

电影和 movieList 对象的形状取决于您和 API 返回的数据。