电影预告片 npm 在我的 netflix 克隆项目中无法正常工作

Question

我已经使用 React.js、firebase 制作了一个 netflix 克隆，并已将 TMDB api 用于电影数据库。 我还使用了 react-youtube 和电影预告片 npm。 所以它有这个功能，每次我点击任何电影海报时，都必须播放它的预告片。 但是对于大多数电影来说，预告片不会出现。

这是我面临的错误 - movie-trailer: 没有找到当前搜索条件下的 TMDB 电影，请尝试搜索 https://www.themoviedb.org/search?query=Luis%20Miguel%3A%20The%20Series TypeError：无法构造“URL”：无效的 URL 在 Row.js:37

'This is the screenshot of errors I am facing on clicking maximum of movies'

我正在分享我的 github 存储库和已部署网站的链接以供参考 -

github - https://github.com/IshitaSharma3101/netflix-clone

网站 - https://netflix-clone-afb8b.web.app/

行组件代码-

import React, { useState, useEffect } from "react";
import YouTube from "react-youtube";
import axios from "./axios";
import "./Row.css";
import movieTrailer from "movie-trailer"

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

function Row({ title, fetchURL, isLargeRow }) {
  const [movies, setMovies] = useState([]);
  const [trailerURL, setTrailerURL] = useState("");

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(fetchURL);
      console.log(request.data.results);
      setMovies(request.data.results);
      return request;
    }
    fetchData();
  }, [fetchURL]);

  const opts = {
    height: "390",
    width: "100%",
    playerVars: {
      autoplay: 1,
    },
  };

  const handleClick = (movie) => {
    if (trailerURL) {
      setTrailerURL("");
    } else {
      movieTrailer(movie?.name || movie?.title || movie?.original_title || "")
        .then((url) => {
          const urlParams = new URLSearchParams(new URL(url).search);
          setTrailerURL(urlParams.get("v"));
        })
        .catch((error) => console.log(error));
    }
  };

  return (
    <div className='row'>
      <h2>{title}</h2>
      <div className='row__posters'>
        {movies.map((movie) => (
          <img
            key={movie.id}
            onClick={() => handleClick(movie)}
            className={`row__poster ${isLargeRow && "row__posterLarge"}`}
            src={`${base_url}${
              isLargeRow ? movie.poster_path : movie.backdrop_path
            }`}
            alt={movie.name}
          />
        ))}
      </div>
      {trailerURL && <YouTube videoId={trailerURL} opts={opts} />}
    </div>
  );
}

export default Row;

Answer 1

我确定您会像我一样遵循 Clever Qazi 教程。我认为这个问题基本上没有解决办法。我也尝试通过 TMDB 为每部电影提供的 ID 获取电影的预告片，但这种方法绝对不适用于我的。我的结论是电影预告片不适用于某些类型的电影或系列......

您可以通过在终端上输入 npx movie-trailer Cobra Kai 来证明自己的结论 这是允许您使用此软件包的命令。 Cobra Kai 是一个众所周知的系列，但这个“工具”没有找到任何预告片。