Миниатюры, возвращающиеся как неопределенные из API YouTube - React - PullRequest
Новая
       10

Миниатюры, возвращающиеся как неопределенные из API YouTube - React

0 голосов
/ 18 октября 2019

Я создаю приложение React, используя API YouTube, чтобы заполнить страницу списком воспроизведения YouTube. Я получаю возвращенные данные и могу получить доступ к заголовку, описанию и всему остальному в объекте сниппета, кроме объекта эскизов, который возвращает неопределенное значение и нарушает работу моего приложения.

Вот мой вызов API в пользовательскомhook 

import { useState, useEffect } from 'react'
import axios from 'axios'

export default function useApiCall() {
  const [videos, setVideos] = useState([])

  const URL = 'https://www.googleapis.com/youtube/v3/playlistItems'
  const id = '---hidden---'
  const API_key = '---hidden---'
  const params = {
    part: "snippet",
    playlistId: id,
    key: API_key,
    maxResults: 30
  }

  useEffect(() => {
    axios
      .get(URL, {
        params: params
      })
      .then(res => {
        setVideos(res.data.items)
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  },[])

  return [videos]
}

и вот мой компонент подкастов, вызывающий пользовательский hook 


import React from 'react'
import useApiCall from '../../data/useApiCall'

export default function Podcasts() {

  const [videos] = useApiCall([])

  return (
    <div>
      {videos && videos.map(vid => {
        return (
          <div key={vid.id}>
            <h3>{vid.snippet.title}</h3>
            <img src={vid.snippet.thumbnails.default.url} alt={vid.snippet.title} />
            <p>{vid.snippet.description.substring(0, 150)} ...</p>
          </div>
        )
      })}
    </div>
  )
}

Теги h3 и p отображаются без проблем, но img ломает приложение.

Я получаю ошибку 

The above error occurred in the <Podcasts> component:
    in Podcasts (created by Context.Consumer)
    in Route (at App.js:17)
    in div (at App.js:14)
    in App (at src/index.js:11)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:10)
    in ParallaxProvider (at src/index.js:9)



TypeError: "vid.snippet.thumbnails is undefined"
    Podcasts Podcasts.js:14
    Podcasts Podcasts.js:9
    React 11
    unstable_runWithPriority scheduler.development.js:818
    React 5
    useApiCall useApiCall.js:23
    useApiCall.js:27


TypeError: vid.snippet.thumbnails is undefined
    Podcasts.js:14
...