Question

更新2

尝试从对youtube api的请求中获取视频缩略图的网址。以下代码从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

所以，要获得高分辨率的缩略图的网址，我会这样做

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

这确实为我提供了url，但它还会引发此错误并破坏应用程序：

TypeError：无法读取未定义的属性“高”

为什么？

Answer 1

尝试做这样的事情

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

我真的只能在问题中看到您的JSON和控制台语句。

我想假设有些snippet没有thumbnails，因此有时未定义缩略图（这会引发错误，并且不会尝试渲染所有其他缩略图）

我假设snippet中总是有item

或者，您可能会遇到类似的事情：

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

编辑：现在看到完整的问题，您会在控制台结果中注意到，记录的值之一是undefined，这就是造成问题的原因

Answer 2

您正在将自己的状态初始化为null以及一堆语法错误，等等……尝试此操作：

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>;
  }
}

在通过React状态存储的JSON进行映射时，为什么会出现类型错误？

TypeError：无法读取未定义的属性“高”

2 个答案: