Невозможно получить данные плейлистов Youtube API данных ошибка 400 в ReactJS

Question

Я создаю компонент реагирования, который получает данные из API данных YouTube, но я получаю ошибку 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

Мне удалось получить ответ, используя запрос в самом 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, например, maxResults и т.д ...