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) });

您的movie和moviesList对象的形状由您决定，API可以返回数据。

获取所有类型的电影

1 个答案: