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

Question

我正在构建一个从 youtube 数据 api 获取数据的 react 组件，但我收到错误 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 key 是否已启用。

Answer 1

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

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 中添加更多参数，例如最大结果等...