用react js渲染youtube视频

Question

我的目标是将查询提供给youtube search，并在我简单的react js应用程序中呈现检索到的视频。对于这个react组件，在npm start之后，在本地主机中没有出现任何问题。在控制台中，我不断地遇到这个错误，我使用axios从API获取数据：

Yutube.js:23 Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

这是我的YoutubeRitriver react JS组件：

import React, { Component } from 'react';
import axios from 'axios';

export default class YouTube extends Component {
constructor(props) {
    super(props);

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

componentWillMount() {
    setInterval(() => {
        this.VideoList();
    }, 2000)
}
VideoList() {
    axios.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUbW18JZRgko_mOGm5er8Yzg&key={MY DATA GOOGLE KEY')
        .then((response) => {
            this.setState({video: response.headers});
        })
        .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>
    )
}
}

Answer 1

我认为你必须处理你的VideoList方法作为异步操作的中间件，bz你在ComponentWillMount中执行它，如果你的间隔计时器永远不会到达，作为react建议停止使用ComponentWillMount，你可以在ComponentDidMount中尝试你的异步操作，但我们会看到一个更好的答案:-) ..

Answer 2

首先，检查您提供的要获取的URL，因为您将获得一个400http状态。

400错误请求

由于察觉到是客户端错误(例如，错误的请求语法、无效的请求消息帧或欺骗性的请求路由)，服务器不能或将不会处理该请求。

来源：

您的axios调用应该如下所示(特别是检查key=部分) axios.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUbW18JZRgko_mOGm5er8Yzg&key=[your-api-key]')

将[your-api-key]替换为您的API-key。

您可以使用Postman检查您的呼叫并确保其正常工作。它还提供了对返回的数据的洞察。在我看来，您可以使用以下this.setState({video: response.headers});设置状态

当我检查提取的结果时。我收到一个具有以下结构的json对象。

{
  "kind": "youtube#playlistItemListResponse",
  "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/ipQV3_cO6U60ZQAQFbmLuvvwHsI\"",
  "nextPageToken": "CAUQAA",
  "pageInfo": {
      "totalResults": 171,
      "resultsPerPage": 5
  },
  "items": [
      {
          "kind": "youtube#playlistItem",
          "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/qKI5Yg1Vl2i2-2N6r0fbQoupdS0\"",
          "id": "VVViVzE4SlpSZ2tvX21PR201ZXI4WXpnLlRId1hfbEUtbElJ",
          "snippet": {
              "publishedAt": "2018-01-30T09:35:59.000Z",
              "channelId": "UCbW18JZRgko_mOGm5er8Yzg",
              "title": "One Direction - One Way or Another (Teenage Kicks) (Live at the BRIT Awards 2013)",
              "description": "One Direction - One Way Or Another (Teenage Kicks) live from The BRIT Awards 2013.\n\nStream more music from One Direction here: http://smarturl.it/OneDSpotify \n\nMore from One Direction:\nDrag Me Down: https://youtu.be/Jwgf3wmiA04 \nPerfect: https://youtu.be/Ho32Oh6b4jc \nHistory: https://youtu.be/yjmp8CoZBIo \nNight Changes: https://youtu.be/syFZfO_wfMQ \nSteal My Girl: https://youtu.be/UpsKGvPjAgw \nKiss You: https://www.youtube.com/watch?v=T4cdfRohhcg  \nYou & I: https://www.youtube.com/watch?v=_kqQDCxRCzM   \nStory of My Life: https://www.youtube.com/watch?v=W-TE_Ys4iwM  \n\nFollow One Direction:\nFacebook https://www.facebook.com/onedirectionmusic/   \nTwitter https://twitter.com/onedirection  \nInstagram https://www.instagram.com/onedirection/   \n\nMore great videos here http://smarturl.it/1DVevoX  \n\nSubscribe to One Direction on YouTube: http://smarturl.it/1DYT\n\nhttp://vevo.ly/YkR6Yy",
              "thumbnails": {},
              "channelTitle": "OneDirectionVEVO",
              "playlistId": "UUbW18JZRgko_mOGm5er8Yzg",
              "position": 0,
              "resourceId": {
                  "kind": "youtube#video",
                  "videoId": "THwX_lE-lII"
              }
          }
      }, {
        // next item
      }, {
        // another item
      }
    ]
}

确保正确地将项分配给状态。它很可能看起来像这样。

this.setState({video: response.data.items});

然后，当在其上进行映射时，使用以下内容来显示标题。this.state.video.map((item, i) => <h1 key={i}>{item.snippet.title}<h1>)。