Klasse Komponente rendert in Schleife

Question

Ich versuche, eine einfache Youtube-App mit youtube-api-search zu bauen. Es gibt zwei Hauptteile der App, dh. VideoDetail & VideoList. VideoDetail dient zum Anzeigen/Abspielen des Videos, während VideoList zum Anzeigen einer Liste von fünf Videos mit ihren Titeln dient.

Jetzt ist das Problem, oberen Abschnitt meiner App dh. wird innerhalb einer Schleife kontinuierlich neu gerendert. Ich kann nicht herausfinden, warum das so ist. Ich app ist wirklich einfach, es hat nicht einmal Lebenszyklus Methoden. Bitte helfen Sie mir, den Fehler herauszufinden.

App.js (Es wird in index.js importiert, wo sie gerendert wird)

import React, { Component } from 'react'; 
import YTSearch from 'youtube-api-search'; 
import SearchBar from './components/search_bar'; 
import VideoList from './components/video_list'; 
import VideoDetail from './components/video_detail'; 

const API_KEY = 'AIzaSyC----key------N7khtCs'; 

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     videos: [], 
     selectedVideo: null 
    }; 
    console.log('sth.'); 
    YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => { 
     this.setState({ 
     videos: videos, 
     selectedVideo: videos[0] 
     }); 
    }); 
    } 

    render(){ 
    return (
     <div> 
     {console.log('indexx')} 

     <VideoDetail video={this.state.selectedVideo} /> 
     <VideoList 
      onVideoSelect={selectedVideo => this.setState({selectedVideo})} 
      videos={this.state.videos} 
     /> 
     </div> 
    ); 
    }; 
} 

export default App;    

video_detail.js

import React from 'react'; 

const VideoDetail = ({video}) => { //accesssing props elements direcly 

    if(!video){ 
     return <div>Loading Details</div>; 
    } 

    const videoId = video.id.videoId; 
    const url = `https//www.youtube.com/embed/${videoId}`; 

    return (
     <div className="video-detail col-md-8"> 
      <div className="embed-responsive embed-responsive-16by9"> 
       <iframe className="embed-responsive-item" src={url}></iframe> 
      </div> 
      <div className="details"> 
       <div>{video.snippet.title}</div> 
       <div>{video.snippet.description}</div> 
      </div> 
     </div> 
    ); 
}; 

export default VideoDetail; 

video_list.js

import React from 'react'; 
import VideoListItem from './video_list_item'; 

const VideoList = props => { 
    const videoItems = props.videos.map((video) => { 
     console.log(video); 
     return (
      <VideoListItem 
       onVideoSelect={props.onVideoSelect} 
       key={video.etag} 
       video={video} /> 
      ); 
    }); 

    return (
     <ul className="col-md-4 list-group"> 
      {videoItems} 
     </ul> 
    ); 
}; 

export default VideoList;     

video_list_item.js

import React from 'react'; 

const VideoListItem = ({video, onVideoSelect}) => { //pulling from props 
    const imageUrl = video.snippet.thumbnails.default.url; 

    return(
     <li onClick={() => onVideoSelect(video)} className="list-group-item"> 
      <div className="video-list media"> 
       <div className="media-left"> 
        <img className="media-object" src={imageUrl} /> 
       </div> 
       <div className="media-body"> 
        <div className="media-heading">{video.snippet.title}</div> 
       </div> 
      </div> 
     </li> 
    ); 
} 

export default VideoListItem; 

Jemand, bitte erklären Sie mir, was das Problem hier ist. Ich will verstehen.

Answer 1

dachte schließlich die Frage aus:

ich war, weil : in der URL nicht vorhanden war.

const url = https://www.youtube.com/embed/${videoId};