取的Youtube视频动态

Question

我试图用react.js

我用PHP卷曲试图获取您从管通道的视频，我也得到适当的反应。下面的代码显示空白页面。 请帮忙。

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

而且你做了一个重大失误是定义你的阵营组成部分，开始用小写字符，就应该始终以大写字母开头，否则transpiler会尝试搜索他们在已定义标签，如