Почему я получаю ошибку типа при сопоставлении с JSON, который хранится в состоянии React? - PullRequest
Новая
       7

Почему я получаю ошибку типа при сопоставлении с JSON, который хранится в состоянии React?

0 голосов
/ 01 февраля 2019

обновление 2

Попытка получить URL-адрес миниатюры видео из запроса к API YouTube.Следующий код извлекает список воспроизведения из YouTube. 

    import React from 'react';
    const playlist = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLdWBBPyLJJc2O6iRhPx-zGYfH33tPB7B4&key='
    const API_KEY = 'YOUR_API_KEY'

    export default class Videos extends React.Component{

      constructor(props){
        super(props)
        this.state = {
          videos: [],
          requesFailed: false
        }
      }

      componentDidMount() {

        fetch( playlist + API_KEY )
          .then(res => res.json())
          .then(res => {
            this.setState({
              videos: res.items
            })
          }, () => {
                this.setState({
                  requesFailed: true
                })
              }
          )
      }

      render() {

        const myVideos = this.state.videos.map(
          (item, index) => {
            console.log(item.snippet.thumbnails) 
            return(
              //    <img 
              //      key={index}
              //      src={item.snippet.thumbnails.high.url}
              //      alt="video"
              //    />
              <p key={index}>video</p>
            )
          }
        )

        return(

          <section>
            {myVideos}
          </section>

        )

      }

    }

Результат console.log (item.snippet.thumbnails) выглядит следующим образом:

result

Итак, чтобы получить URL-адрес миниатюры в высоком разрешении, я делаю 

console.log(item.snippet.thumbnails.high.url)

Это действительно дает мне URL-адрес, но также выдает эту ошибку и ломает приложение:

TypeError: Cannotчитать свойство 'high' из неопределенного

Почему?

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Попробуйте сделать что-то вроде этого 

video.snippet.thumbnails && video.snippet.thumbnails.high.url

Я действительно могу видеть только ваш JSON и консольный оператор в вопросе.

Я хочу предположить, что есть некоторые snippet с, которые делаютне имеют thumbnails, и, как следствие, миниатюра иногда не определена (это выдает ошибку и не пытается пытаться отобразить все остальные)

Я предполагаю, что всегда есть snippet в item здесь, хотя

Альтернативно, у вас может быть что-то вроде: 

video.snippet.thumbnails ? video.snippet.thumbnails.high.url : 'default-url'

РЕДАКТИРОВАТЬ: Теперь, когда вы видите полный вопрос, вы увидите в результатах консоли, что одним из зарегистрированных значений являетсяundefined вот причина вашей проблемы

0 голосов
/ 01 февраля 2019

Вы инициализируете свое состояние как нулевое и целый ряд синтаксических ошибок и т.д. ... Попробуйте это: 

import React from 'react';

export default class Videos extends React.Component {
  state = { videos: [], isLoading: true, error: null };

  componentDidMount() {
    fetch(playlist)
      .then(response => response.json())
      .then(data => this.setState({ videos: data.items, isLoading: false }))
      .catch(error =>
        this.setState({ error: error.message, isLoading: false }),
      );
  }

  renderVideos = () => {
    const { videos, isLoading, error } = this.state;
    if (isLoading) {
      return <div>Loading...</div>;
    }

    if (error) {
      return <div>{error}</div>;
    }

    return (
      <div>
        {videos.map(video => (
          <img src={video.snippet.thumbnails.high.url} alt="video" />
        ))}
      </div>
    );
  };
  render() {
    return <div>{this.renderVideos()}</div>;
  }
}
...