ReactJSコンポーネントのレンダリングに必要なもの - YouTube API

Question

ReactJSとYouTube APIで遊んで、プレイリストから自動的にビデオを取り出すようになりました。下に表示されたコンポーネントを取得しようとしているが、私のコンポーネント内の状態の "アイテム"リストにアクセスできないようです。私は$GETの結果を取り戻すとthis.stateに挿入することができましたが、私はrender()Video内のコンポーネントの内部で再びそれを参照しようとすると、私は行うことができなかったのです

import React, { Component } from 'react'; 
import './App.css'; 
import $ from 'jquery'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {} 
    } 
    componentDidMount =() => { 
    var thisContext=this; 
    $.get("https://content.googleapis.com/youtube/v3/playlistItems?maxResults=4&part=snippet&playlistId={SOME_PLAYLIST_ID}&key={MY_API_KEY}", function (data) { 
     thisContext.setState(data); 
    }) 
    } 
    render() { 
    return (
     <div> 
     <Video /> 
     </div> 
    ); 
    } 
} 

class Video extends App { 
    render() { 
    return(
     <div> 
     <iframe width="560" height="315" src={'https://www.youtube.com/embed/' + this.state.items[0].snippet.resourceId.videoId} frameborder="0" allowfullscreen></iframe> 
     </div> 
    ) 
    } 
} 

export default App; 

：以下のコードを参照してください。そう。私はいくつかの非同期/参照の問題が続いていると推測しています。どんな入力をいただければ幸いですか？

P.S - ボーナスに関する質問items[]をループしてすべてのビデオIDを取得し、それぞれを<Video />コンポーネントとして表示するにはどうすればいいですか、それともアイテムをループする方法ではありませんか？まで、あなたの応答を取得する前に

componentDidMount =() => { 
    $.get("https://content.googleapis.com/youtube/v3/playlistItems?maxResults=4&part=snippet&playlistId={SOME_PLAYLIST_ID}&key={MY_API_KEY}", (data) => { 
    this.setState({ items: data }); 
    }); 
} 

render機能も呼ばれ、そして：

Answer 1

1. あなたはES6を使用している場合は、this参照設定から自分を救うために、コールバックの内側に矢印の関数を使用します応答this.state.itemsが存在しないため、例外が発生します。また、アイテムを反復するmapを使用することができます。

   render() { 
       if (!this.state.items || this.state.items.length === 0) { 
        return null; // or <div></div>, or a loader, or whatever you want in the meantime 
       } 
   
       this.state.items.map((item, i) => { 
        return(
         <div> 
         <iframe key={ i } width="560" height="315" src={'https://www.youtube.com/embed/' + item.snippet.resourceId.videoId} frameborder="0" allowfullscreen></iframe> 
         </div> 
        ); 
       } 
   } 
   

Answer 2

あなたがビデオコンポーネントに小道具のような「映像データ」を渡す必要があるので、もしコンポーネントは、状態を共有しない：

return (
    <div> 
    <Video video={this.state.data[0]}/> 
    </div> 
); 

を

なぜthis.state.dataとthis.state.itemsではないのですか？使用しているので：

this.setState(data) // its equal to this.setState({data: data}) 

And..yes、あなたはショーのために動画データを反復処理する必要があり、何かのように：

// app component 
render() { 
return (
    { this.state.data(video => (<Video video={video} key={video.etag}/>)) } 
) 
}