Question

我正在构建一个react组件，该组件从youtube数据api获取数据，但出现400错误。下面是我的代码

import React from 'react';

const key = 'xxx-Y-xxxx';
const playlistId = 'xxx-xx-xx';
const url = 'https://www.googleapis.com/youtube/v3/playlistItems';

const options = {
  'part': 'snippet',
  key,
  'maxResults': 5,
  playlistId
}

class Youtube extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      video: <iframe title="video" src="https://www.youtube.com/embed/-UkuypFGXWo" frameBorder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>
    }
  }
  componentDidMount() {
    fetch(url, options)
    .then((data) => data.json())
    .then((dataJson) => {
      console.log(dataJson)
    })
    .catch((error) => {
      console.log(error);
    })
  }
  render() {
    return (
      <div>
        {this.state.video}
      </div>
    )
  }
}

export default Youtube;

到目前为止，我只是试图获取数据，稍后我将在这些项目上映射以显示为单独的视频，然后在主视频帧上单击播放。我还检查了API密钥是否已启用。

Answer 1

我能够通过在网址本身中使用查询来获取响应。

const url = 'https://www.googleapis.com/youtube/v3/playlistItems';
const key = 'xxxx';
const playlistId = 'xxxx';

const finalUrl = `${url}?part=snippet&playlistId=${playlistId}&key=${key}`;

我们可以在url中添加更多参数，例如maxResults等...

在ReactJS中无法获取播放列表数据Youtube Data API错误400

1 个答案: