エラーメッセージReact：Uncaught TypeError：undefined（）のプロパティ 'length'を読み取ることができません

Question

udemyのチュートリアルビデオをStephen Griderで見ています。セクション2でPropsの使い方について説明しています。取得がであることを

エラーメッセージは長さ「プロパティを読み取ることができません 『』未定義の（）」

私が作るために、index.jsとvideo_list.js動画上ファイルに戻って見てきました確かに私はスペルミスしていなかった。

Uncaught TypeError: Cannot read property 'length' of undefined

bundle.js:19852 Error: findComponentRoot(..., .0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

index.js

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import YTSearch from 'youtube-api-search'; 
import VideoList from './components/video_list'; 
import SearchBar from './components/search_bar'; 
const API_KEY = 'Youtube API Here'; // YouTube API Key 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { video: [] }; 

    YTSearch({key: API_KEY, term: 'surfboards' }, (videos) => { 
     // console.log(data); 
     this.setState({ videos }); 
     // this.setState({ videos: videos }); Only work if the key var name are samething 
    }); 
    } 

    render() { 
    return (
     <div> 
     <SearchBar /> 
     <VideoList videos={this.state.videos} /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.querySelector('.container')); 

videos_list.js

import React from 'react'; 

    const VideoList = (props) => { 
    console.log(VideoList); 
     return (
      <ul className="col-md-4 list-group"> 
       { props.videos.length } 
      </ul> 
    ); 
    }; 

export default VideoList; 

Answer 1

そのタイプミス、ビデオの代わりに状態変数のビデオを使用：

this.state = { videos: [] };