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

Question

我是React初学者，所以对我宽容一点。

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

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

我的代码可以很好地提取数据，但目前我似乎无法访问每个视频ID的"videoId"属性……我无法理解为什么视频ID对象是可访问的，但不能访问其中的属性。。

看起来YouTube API正在返回一个对象数组。。所以我想我应该能够做到这一点：

videos[0].id.videoId

但这是错误的。。。然而，videos[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;

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