错误消息React:Uncaught TypeError:无法读取undefined()的属性'length'

时间:2017-05-03 18:33:45

标签: javascript reactjs

我正在观看有关udemy的教程视频Stephen Grider上午第2节,讨论如何使用道具。

获取的错误消息'无法读取undefined()的属性'长度'

我已经回顾了视频中的 index.js video_list.js 文件,以确保我没有拼写错误。

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 ``.

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'));

index.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;

videos_list.js

{{1}}

1 个答案:

答案 0 :(得分:1)

它是一个错字,而不是视频使用状态变量中的视频:

this.state = { videos: [] };