Javascript 需要帮助呈现ReactJS组件-YouTube API

刚刚开始使用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;

import React，{Component}来自'React'；
导入“/App.css”；
从“jquery”导入美元；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={}
}
componentDidMount=（）=>{
var thisContext=这个；
$.get（”https://content.googleapis.com/youtube/v3/playlistItems?maxResults=4&part=snippet&playlistId={SOME_PLAYLIST_ID}&key={MY_API_key}”，函数（数据）{
thisContext.setState（数据）；
})
}
render（）{
返回(
);
}
}
类视频扩展应用程序{
render（）{
返回(
)
}
}
导出默认应用程序；

我正在返回

$GET

上的结果，并且能够将其插入

this.state

，但是当我尝试在

视频

组件中的

render（）

中再次引用它时，我无法这样做。我猜有一些异步/引用问题正在发生。任何意见都将不胜感激

另外，还有一个问题，我如何在

项目[]

上循环以检索所有videoID并将其显示为

组件，或者这不是在项目上循环的方式

如果您使用的是ES6，请在回调中使用arrow函数以避免设置

此

引用：

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

函数甚至在您得到响应之前调用，直到您得到响应

为止，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>
        );
    }
}  

render（）{
如果（！this.state.items | | this.state.items.length==0）{
返回null；//或，或加载程序，或同时需要的任何内容
}
this.state.items.map（（item，i）=>{
返回(
);
}
}  

---

组件不共享状态，因此如果您需要像视频组件中的道具一样传递“视频数据”：

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

而且..是的，您应该迭代数据以显示视频，例如：

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

//应用程序组件
render（）{
返回(
{this.state.data（video=>（））}
)
}

谢谢！在

这个.state.items上添加null检查起作用了！对
视频
组件的渲染方式仍然有点不熟悉。如果在数据不可用时我返回
null
，那么组件如何/为什么再次加载？在每次
setState
调用或对组件进行属性更改后，
render
函数再次被调用。它没有再次加载，只是重新加载（意味着构造函数/componentWillMount/componentDidMount不会被调用，只是
呈现
）
// app component
render() {
return (
  { this.state.data( video => (<Video video={video} key={video.etag}/>) ) }
 )
}