मैं youtube-api-search का उपयोग करके एक साधारण यूट्यूब ऐप बनाने की कोशिश कर रहा हूं। ऐप के दो मुख्य भाग हैं यानी। वीडियो विवरण और वीडियो सूचीवीडियो विवरण का उद्देश्य वीडियो दिखाना/चलाना है, जबकि वीडियोसूची शीर्षक के साथ पांच वीडियो की सूची प्रदर्शित करने के लिए है।

अब, मुद्दा है, मेरे ऐप का शीर्ष भाग यानी। एक लूप के अंदर लगातार पुन: प्रस्तुत किया जा रहा है। मैं समझ नहीं पा रहा हूं कि ऐसा क्यों है। I ऐप वास्तव में सरल है इसमें कोई जीवनचक्र विधियाँ भी नहीं हैं। कृपया त्रुटि का पता लगाने में मेरी मदद करें।

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;

कोई, कृपया मुझे समझाएं कि यहां क्या समस्या है। मैं समझना चाहता हूँ।

0
noobie 16 नवम्बर 2017, 15:03

1 उत्तर

सबसे बढ़िया उत्तर

अंत में इस मुद्दे को समझ लिया:

मैं इसलिए था क्योंकि : यूआरएल में मौजूद नहीं था।

कॉन्स्ट यूआरएल = https://www.youtube.com/embed/${videoId};

0
noobie 16 नवम्बर 2017, 16:48