React开发Netflix克隆项目时TMDB API返回重复内容且海报不显示问题

问题1：所有分类影片内容完全一致 #

根因 #

requests.js 存在两处参数格式错误：

• 分类筛选的参数名错误，TMDB官方要求的分类筛选参数为with_genres，代码中误写为with_genre，缺失末尾的s，导致TMDB无法识别筛选条件，所有请求返回默认热门影片。
• Netflix原创内容的请求参数分隔符错误，$with_networks=213中的$应为参数分隔符&，导致筛选Netflix专属内容的条件不生效。

修复后的requests.js代码 #

const API_KEY = "你的TMDB 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_genres=28`,
    fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
    fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
    fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
    fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genres=99`,
  }
  export default requests;

问题2：Netflix原创区域海报无法正常展示 #

根因 #

Row.js存在两处逻辑错误：

• 未声明movies状态变量就直接调用setMovies存储接口返回数据，导致数据无法正常挂载到渲染流程。
• 大图样式的类名判断错误，代码中isLargeRow为true时返回的类名还是row__poster，没有正确应用大尺寸海报的row__posterLarge样式，同时alt属性的取值未兼容电影类内容的title字段，部分内容的海报说明展示异常。

修复后的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 }) {
  // 新增movies状态声明
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    async function fetchData() {
      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">
        {movies.map(movie => (
          // 修正类名判断，兼容影视内容的不同名称字段
          <img 
            key={movie.id} 
            className ={`row__poster ${isLargeRow && "row__posterLarge"}`} 
            src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path}`} 
            alt={movie.name || movie.title}
          />
        ))}
      </div>
    </div>
  );
}

export default Row;

完成上述修改后重新运行项目即可解决问题。

内容的提问来源于stack exchange，提问作者Kajal Jaiswal