我是React开发的新手，希望有人能帮助我解决这个问题。我正在编写一个YouTube视频https://www.youtube.com/watch?v=XtMThy8QKqU&t=10138s（2：55：00显示了它应该做什么），出于某种原因，我找不到我犯的错误。当我在localhost上测试我的应用时，只有当我点击某些电影封面时，才显示应该播放预告片的窗口，而当我点击其他电影封面时，就不会显示。我的另一个问题是，它永远不会真正播放预告片。控制台显示的错误，你可能会在这里看到[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