javascript - 动态获取 Youtube 视频

Question

我正在尝试使用 react.js 从您的管 channel 获取视频

我尝试使用 PHP CURL，得到了正确的响应。下面的代码显示空白页。请帮忙。

import $ from 'jquery'; 
import React, { Component } from 'react';;

class iLotIndex extends Component {

constructor(props) {
    super(props);

    this.state = {video: []};
  }

VideoList() {
    return $.getJSON('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
      .then((data) => {
        this.setState({ video : data.results });
      });
  }


  render() {
    this.VideoList().then(function(res){
      this.state = {video: res};
    });
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">
          {this.state.video.map((item, i) =>{
            return(
              <h1>{item.items}</h1>

            )
          })}
        </div>
      </div>
    )
  }
}

Answer 1

将 this.VideoList() 调用移至 componentDidMount() 而不是 render():

constructor(props) {
  super(props);

  this.state = {video: []};
  this.VideoList = this.VideoList.bind(this);
}

VideoList() {
  fetch('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
    .then(resp => resp.json())
    .then((resp) => {
      console.log(resp);
      //this.setState({video: resp.results});
      this.setState({video: resp.items});
      console.log(this.state.video);
    });


  //$.getJSON('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
    //.then((data) => {
      //this.setState({ video : data.results });
    //});
}

componentDidMount() {
  this.VideoList();
}

render() {

  return (
    <div id="layout-content" className="layout-content-wrapper">
      <div className="panel-list">
        {this.state.video.map((item, i) =>{
          console.log(item);
          return(
            <h1>{item.items}</h1>

          )
        })}
      </div>
    </div>
  )
}

如果它还不能正常工作，请在这里发布一些错误，谢谢!