ReactJS（初学者）使用 Youtube API - 返回的对象不允许我访问 VideoId 属性

Posted 2023-02-24

【中文标题】ReactJS（初学者）使用 Youtube API - 返回的对象不允许我访问 VideoId 属性

【英文标题】：ReactJS (beginner) Using Youtube API - Returned Object Not Allowing Me to Access VideoId Property

【发布时间】：2018-12-21 07:18:01

【问题描述】：

我是 React 初学者，所以请放轻松..

我现在正在制作一个非常基本的应用程序，稍后我将对其进行扩展..

现在我只是想让 React 从 Youtube 中提取一个带有频道数据的 JSON 对象，存储返回的视频列表（我猜是状态？），然后提取视频 ID，以便我可以扔掉它们在一个对象中并随机化它们以便稍后播放。

我的代码可以正常提取数据，但目前我似乎无法访问每个视频 ID 的“videoId”属性...我一辈子都做不到，了解为什么视频 ID 对象可以访问，但不能访问它们的属性..

YouTube API 似乎正在返回一个对象数组。所以我认为我应该能够做到这一点：

视频[0].id.videoId

但这会出错...但是视频[0].id 似乎可以工作，所以我迷路了..

我做错了什么？我使用状态错误吗？我访问对象属性是否错误？

示例中的控制台日志见下文：

import React,  Component  from "react";
import "./App.css";
import YouTube from "react-youtube";

class App extends Component 
  constructor(props) 
    super(props);
    console.log(">> [App.js] Inside Constructor", props);
    this.state = 
      videos: 
    ;
  

  componentDidMount() 
    var that = this;
    var API_key = "MY API KEY IS HERE (working) ";
    var channelID = "UCs3o4RhBiP2wcwqkZR2QVLw";
    var maxResults = 10;
    var url =
      "https://www.googleapis.com/youtube/v3/search?key=" +
      API_key +
      "&channelId=" +
      channelID +
      "&part=snippet,id&order=date&maxResults=" +
      maxResults;

    fetch(url)
      .then(function(response) 
        if (response.status >= 400) 
          throw new Error("Bad response from server");
        
        return response.json();
      )
      .then(function(data) 
        that.setState( videos: data.items );
        console.log(">> data items: ", data.items);
      );
  

  render() 
    const opts = 
      height: "390",
      width: "640",
      playerVars: 
        // https://developers.google.com/youtube/player_parameters
        autoplay: 1
      
    ;

    console.log(">> states = ", JSON.stringify(this.state.videos[0]));
    //logs :
    // >> states =  "kind":"youtube#searchResult","etag":"\"XI7nbFXulYBIpL0ayR_gDh3eu1k/z_ggxomb8RCC1cd6Bx8IrkCUHxA\"","id":"kind":"youtube#video","videoId":"IoId8_4mvT4","snippet":"publishedAt":"2017-07-18T19:12:33.000Z","channelId":"UCs3o4RhBiP2wcwqkZR2QVLw","title":"WATCH in 360 - CP24 tours Toronto Island. July 18 2017","description":"Subscribe to CP24 to watch more videos: https://www.youtube.com/channel/UCs3o4RhBiP2wcwqkZR2QVLw Connect with CP24: For the latest news visit: ...","thumbnails":"default":"url":"https://i.ytimg.com/vi/IoId8_4mvT4/default.jpg","width":120,"height":90,"medium":"url":"https://i.ytimg.com/vi/IoId8_4mvT4/mqdefault.jpg","width":320,"height":180,"high":"url":"https://i.ytimg.com/vi/IoId8_4mvT4/hqdefault.jpg","width":480,"height":360,"channelTitle":"CP24","liveBroadcastContent":"none"

    console.log(">> states = ", JSON.stringify(this.state.videos[0].id));
    //logs : ERROR :
    // >> states = ncaught TypeError: Cannot read property 'id' of undefined
    // at App.render (App.js:50)
    // at finishClassComponent (react-dom.development.js:13193)
    // at updateClassComponent (react-dom.development.js:13155)

    return (
      <div className="App">
        
          // using an NPM package for displaying YouTube Videos
          // will add this back when I get the videoIds pulling correctly..
          //<YouTube
          //   videoId=this.state.videos[1].videoId
          //   opts=opts
          //   onReady=this._onReady
          // />
        
      </div>
    );
  


export default App;

【参考方案1】：

您的请求是异步的，因此不会在第一次渲染时设置视频。 this.state.videos[0] 将提供undefined，并尝试访问id 将导致您的错误。

你可以改为例如保留一个额外的状态 loading 并只渲染 null 直到您的网络请求完成。

示例

class App extends Component 
  state =  videos: [], loading: true ;

  componentDidMount() 
    var that = this;
    var API_key = "MY API KEY IS HERE (working) ";
    var channelID = "UCs3o4RhBiP2wcwqkZR2QVLw";
    var maxResults = 10;
    var url =
      "https://www.googleapis.com/youtube/v3/search?key=" +
      API_key +
      "&channelId=" +
      channelID +
      "&part=snippet,id&order=date&maxResults=" +
      maxResults;

    fetch(url)
      .then(function(response) 
        if (response.status >= 400) 
          throw new Error("Bad response from server");
        
        return response.json();
      )
      .then(function(data) 
        that.setState( videos: data.items, loading: false );
      )
      .catch(error => 
        console.error(error);
      );
  

  render() 
    const  loading, videos  = this.state;

    if (loading) 
      return null;
    

    return (
      <div className="App">
        <YouTube
          videoId=videos[1].id.videoId
          opts=
            height: "390",
            width: "640",
            playerVars: 
              autoplay: 1
            
          
          onReady=this._onReady
        />
      </div>
    );
  

【讨论】：

谢谢你！这真的很有帮助。我怀疑异步请求是一个问题，但我不确定如何检查它是否加载，但这是有道理的。我试试看。