TypeError：无法读取未定义的属性'snippet'

我有以下两个类。我认为这里的主要问题是render函数传递初始状态，而不是通过YTsearch API帮助更新的更新状态。如果我在控制台上打印有关视频的信息，我确实会根据对象收到有关搜索查询的相关信息。但是，当传递这些对象到一个新的组件（标题）时，它似乎是未定义的（空）。TypeError：无法读取未定义的属性'snippet'

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Component } from 'react'; 
import Youtube from './Youtube'; 
import Title from './Title'; 
import YTSearch from 'youtube-api-search'; 

const key = '************************************'; 

class YoutubeVideo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {video:'', selectedVideo:'', received: false}; 
    this.getvideos(); 
    } 

    getvideos() { 
    YTSearch({key: key, term: 'football'}, (videos) => { 
     this.setState({ 
      videos: videos, 
      selectedVideo: videos[0], 
      received : true 
      }); 
     }); 
    } 

    render() { 
     if (this.state.received){ 
      return (
       <Title videoTitle={ this.state.selectedVideo }/> 
      ) 
     } 
     return (
      <div> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(
    <YoutubeVideo />, 
    document.getElementById('root') 
);

Title.js

import React, { Component } from 'react'; 


class Title extends Component { 

    render() { 
    const video = this.props.videoTitle; 
     return (
      <div> 
       <div>{ this.video.snippet }</div> 
       <div>{ this.video.snippet }</div> 
      </div> 
     ) 
    } 
} 

export default Title;

我得到的Title.js以下错误：

TypeError: Cannot read property 'snippet' of undefined

请帮助。

来源

2017-09-12 Saad Khan

不是将'selectedVideo'的初始值定义为空字符串，而是将其定义为空白对象，如下所示：'selectedVideo：{}'，它应该是'{video.snippet}'不是'this .video.snippet'。 –

在Title.js中，使用{video.snippet}而不是this.video.snippet。
您可以使用反应组件生命周期方法来调用getvideos（）方法。

来源

2017-09-12 12:09:48

对不起。愚蠢的错误由我：/ –

TypeError：无法读取未定义的属性'snippet'

回答

相关问题