动态获取 Youtube 视频

Question

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

我尝试使用 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>
  )
}

请在此处发布一些错误，以防它还不起作用，谢谢！

Answer 2

我建议你用 axios 或者用 react fetch

axios.get('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
  .then((response) => {
    this.setState({video: response.results})
  })
  .catch(function (error) {
    console.log(error);
  });

此外，您在不需要的渲染函数中直接改变状态，因为无论如何您都在设置状态。还有一件事，我认为您不需要在每次渲染时都获得 api 响应，您可以在 componentWillMount 中执行此操作，如果您希望它是周期性的，请使用 setInterval。

import React, { Component } from 'react';;
import axios from 'axios';
class ILotIndex extends Component {

constructor(props) {
    super(props);

    this.state = {video: []};
  }
componentWillMount() {
    setInterval(() => {
         this.VideoList();
    }, 2000)
}
VideoList() {
    axios.get('https://www.googleapis.com/youtube/v3/search?key=AIzaxxxxxxxxxxxxxxxxxxxxx&channelId=UCexxxxxxxxxxxxxxxx&part=snippet,id&order=date&maxResults=20')
  .then((response) => {
    this.setState({video: response.results});
  })
  .catch(function (error) {
    console.log(error);
  });
  }


  render() {
    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>
    )
  }
}

你犯的一个主要错误是定义你的 React 组件，从小写字符开始，它们应该总是以大写字母开头，否则编译器会尝试在已经定义的标签中搜索它们，比如 div, p, span etc