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

获取

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

动态获取Youtube视频

2 个答案: