クラスコンポーネントがループ内で再レンダリングしています

Question

youtube-api-searchを使用して簡単なYouTubeアプリを構築しようとしています。アプリの2つの主要な部分があります。 VideoDetail & VideoListVideoDetailは、ビデオを表示/再生することを目的としていますが、VideoListはタイトル付きの5つの動画のリストを表示するためのものです。

今、問題は、私のアプリのトップセクションです。ループ内で連続的に再描画されています。私はそれがなぜであるか把握できません。私はアプリは、それはライフサイクルの方法を持っていない本当に簡単です。エラーを理解するのを手伝ってください。

App.js（これは、それがレンダリングされるindex.jsにインポートされる）

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; 

誰か、ここで何が問題なのか教えてください。私は理解したい。

Answer 1

は最後に問題を考え出し：

:がURLに存在していなかったので、私はでした。

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