在React.js中，TMDB API返回相同的数据

Question

我正在尝试创建 Netflix 克隆。我正在尝试通过一个名为 TMDB 的 API 来播放电影。但是，当我尝试观看电影时，内容似乎是相同的（动作电影、喜剧电影、浪漫电影和纪录片），并且电影海报没有出现在 Netflix 原创区域中。

代码

App.js

import React from 'react';
import './App.css';
import Row from './Row';
import requests from './requests';

function App() {
  return (
    <div className="App">
     <h1>HEY boiii!!</h1>
     <Row title="NETFLIX ORIGINALS" fetchUrl={requests.fetchNetflixOriginals} isLargeRow />
     <Row title="Trending Now" fetchUrl={requests.fetchTrending} />     
     <Row title="Top Rated" fetchUrl={requests.fetchTopRated} />  
     <Row title="Action Movies" fetchUrl={requests.fetchActionMovies} />  
     <Row title="Comedy Movies" fetchUrl={requests.fetchComedyMovies} />  
     <Row title="Horror Movies" fetchUrl={requests.fetchHorrorMovies} />  
     <Row title="Romance Movies" fetchUrl={requests.fetchRomanceMovies} />  
     <Row title="Documentaries" fetchUrl={requests.fetchDocumentaries} />  
    </div>
  );
}

export default App;

request.js

const API_KEY = "API KEY";

const requests = {
    fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
    fetchNetflixOriginals: `/discover/tv?api_key=${API_KEY}$with_networks=213`,
    fetchTopRated: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
    fetchActionMovies: `/discover/movie?api_key=${API_KEY}&with_genre=28`,
    fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genre=35`,
    fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genre=27`,
    fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genre=10749`,
    fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genre=99`,
  }
  export default requests;

Row.js

import React, { useState, useEffect } from 'react';
import axios from './axios';
import './Row.css';

const base_url ="https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl, isLargeRow }) {
useEffect(() => {
    async function fetchData() {
    const request = await axios.get(fetchUrl);
    setMovies(request.data.results);
    return request;
    }
    fetchData();
}, [fetchUrl]);

console.table(movies);

    return (
        <div className="row">
            <h2>{title}</h2>

            <div className="row__posters">
                {/* several row__poster(s) */}

                {movies.map(movie => (

                    
                <img key={movie.id} className ={`row__poster ${isLargeRow && "row__poster"}`} src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name}/>
                ))}
            </div>
        </div>
    );
}

export default Row;

行.css

.row__posters {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}

.row__posters::-webkit-scrollbar {
  display: none;
}
  

.row__poster {
 
  object-fit: contain;
  width: 100%;
  max-height: 100px;
  margin-right: 10px;
  transition: transform 450ms;
}

.row__poster:hover {
  transform: scale(1.08);
}

.row__posterLarge {
  max-height: 250px;
}

.row__posterLarge:hover {
  transform: scale(1.09);
  opacity: 1;
}

应用程序.css

* {
  margin: 0;
}

axios.js

import axios from "axios";

const instance = axios.create({baseURL: "https://api.themoviedb.org/3"}); 

export default instance;

Answer 1

我目前正在开发这个项目并遇到了同样的问题。当我在 request.js 文件中将“genre”更改为“genres”时，我就能让它工作了。希望这对某人有帮助。

Answer 2

问题很可能出在

Row

组件上。本质上

setMovies(...);

和

movies

似乎与组件外部的数组一起运行 - 例如全球。

您想要更改函数以使用

useState(...)

钩子。这样，电影数据将“附加”到您的组件而不是全局上下文。

您可以在此处阅读 hooks 文档

import './Row.css';
import React from 'react';

const base_url ="https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl, isLargeRow }) {
  const [movies, setMovies] = React.useState([]); // <-- HERE 

  useEffect(() => {
    async function fetchData() {
      // TODO: make sure to do some validation here, what if request fails?
      const request = await axios.get(fetchUrl);
      setMovies(request.data.results);
      return request;
    }

    fetchData();
  }, [fetchUrl]);


    return (
        <div className="row">
            <h2>{title}</h2>

            <div className="row__posters">
                {/* several row__poster(s) */}

                {movies.map(movie => (

                    
                <img key={movie.id} className ={`row__poster ${isLargeRow && "row__poster"}`} src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name}/>
                ))}
            </div>
        </div>
    );
}

export default Row;

Answer 3

import './Row.css';
import React, { useState, useEffect } from 'react';
import axios from 'axios';


const base_url ="https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl, isLargeRow }) {
  const [movies, setMovies] = useState([]); // <-- HERE 

  useEffect(() => {
    async function fetchData() {
      // TODO: make sure to do some validation here, what if request fails?
      const request = await axios.get(fetchUrl);
      setMovies(request.data.results);
      return request;
    }

    fetchData();
  }, [fetchUrl]);


    return (
        <div className="row">
            <h2>{title}</h2>

            <div className="row__posters">
                {/* several row__poster(s) */}

                {movies.map(movie => (

                    
                <img key={movie.id} className ={`row__poster ${isLargeRow && "row__poster"}`} src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name}/>
                ))}
            </div>`enter code here`
        </div>
    );
}

export default Row;