为什么我的组件不能构造Url？

Question

我对发展的反应很新，希望有人能帮我解决这个问题。我正在与YouTube视频https://www.youtube.com/watch?v=XtMThy8QKqU&t=10138s (2:55:00显示它应该做什么)一起编码，由于某种原因，我找不到我正在犯的错误。当我在本地主机上测试我的应用程序时，预告片应该播放的窗口只会在我点击某些电影封面时显示，而不是在我点击其他影片时显示。我的另一个问题是它永远不会真正播放预告片。控制台显示您希望在这里看到的错误1：https://i.stack.imgur.com/vC6Sh.jpg

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


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

function Row({ title, fetchUrl, isLargeRow }) {
    const [movies, setMovies] = useState([]);
    const [trailerUrl, setTrailerUrl] = useState("");

    //A snippet of code which runs based on a specific condition or variable
    useEffect(() => {
    // if brackets are blank [] it means run once when row loads, and don't run again
         async function fetchData() {
             const request = await axios.get(fetchUrl);
                // console.log(request.data.results);
             setMovies(request.data.results)
             return request;
        // async function fetchData() {
        //     try{
        //         const request = await axios.get(fetchUrl);
        //         console.log(request);
        //         return request;
        //     }
        //     catch (error){
        //         console.log(error);
        //     }

        }
        fetchData();
        }, [fetchUrl]);

        const opts = {
            height: '390',
            width: '100%',
            playerVars: {
              // https://developers.google.com/youtube/player_parameters
              autoplay: 1,
            },
        };
        
        //console.log(movies);

        const handleClick = (movie) => {
            if (trailerUrl){
                setTrailerUrl('');
            } else {
                movieTrailer(movie?.name || "")
                .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

name movie中的无效属性

查看一下tmdb文档，它将向您展示每个对象的属性。在这种情况下，不存在name。尝试使用类似于movie.title的东西

在您的handleClick()函数中，您可以使用movie?.title。

尝试使用movie.name将返回一个空值。哪个错误出现在movieTrailer()之外，您就没有得到YouTube url。