Javascript 使用react js呈现youtube视频

我的目标是将查询提供给youtube搜索，并在我的simple react js应用程序中呈现检索视频。I在

npm启动之后

对于这个react组件，localhost中不会出现任何问题。在控制台中，我不断遇到这个错误，我使用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>
    )
}
}

import React，{Component}来自'React'；
从“axios”导入axios；
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
this.state={video:[]}；
}
组件willmount（）{
设置间隔（（）=>{
这个.VideoList（）；
}, 2000)
}
视频列表（）{
axios.get（）https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUbW18JZRgko_mOGm5er8Yzg&key={我的数据谷歌键'）
。然后（（响应）=>{
this.setState（{video:response.headers}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回(
{this.state.video.map（（项目，i）=>{
返回(
{item.items}
)
})}
)
}
}

我认为您必须将您的VideoList方法作为异步操作的中间件来处理，如果您在ComponentWillMount中执行它，那么您的间隔计时器将永远无法到达，当您停止使用ComponentWillMount时，您可以在ComponentDidMount中尝试您的异步操作，但我们将看到更好的答案：-）…

首先首先，检查您提供的URL，以便在恢复400 http状态时获取

400错误请求
服务器无法或将不会处理到期的请求 被认为是客户端错误的内容（例如，格式错误 请求语法、无效的请求消息帧或欺骗请求 路由）

资料来源：

axios调用应如下所示（具体检查

键=

部分）

axios.get（'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUbW18JZRgko_mOGm5er8Yzg&key=[您的api密钥]”）

用api密钥替换

[您的api密钥]

您可以使用来检查您的呼叫并确保其正常工作。它还可以查看返回的数据。从我所看到的，您可以使用以下

this.setState（{video:response.headers}）；

当我检查fetch的结果时，我收到一个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）=>{item.snippet.title}）

400错误是错误的请求。请尝试在浏览器控制台的“网络”选项卡中查找请求中错误的详细信息。它会提示您将请求弄糟的地方。