需要帮助渲染 ReactJS 组件 - YouTube API

Question

刚开始使用ReactJS和YouTube API自动从播放列表中提取视频。试图在下面呈现组件，但似乎我无法访问组件内部状态的"项目"列表。请参阅下面的代码片段：

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;

我正在$GET上返回结果并能够将其插入this.state，但是当我尝试在组件Video render()内再次引用它时，我无法这样做。我猜有一些异步/引用问题正在发生。任何意见将不胜感激！

P.S - 奖励问题，我将如何循环items[]以检索所有 videoID 并将它们分别显示为<Video />组件，或者这不是循环项目的方法？

Answer 1

1. 如果您使用的是 ES6，请在回调中使用箭头函数来避免设置this引用：

   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 });
     });
   }
   

2. 甚至在您获得响应之前render调用该函数，并且在您获得响应之前，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})

和。。是的，您应该迭代显示视频的数据，例如：

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