获取所有类型的电影

Question

我正在使用ReactJS和TMDb API制作一个电影应用程序，我想按类型获取电影，并将其显示在我的主页中，为此我创建了例如方法initHorrorMovies()who:

• 对某种类型的电影执行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) });

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