开发者问题收集

错误消息 React: Uncaught TypeError: 无法读取未定义的属性“length”()

2017-05-03
793

我正在观看 Stephen Grider 在 udemy 上制作的教程视频,其中第 2 部分讨论了如何使用 Props。

收到的错误消息是 “无法读取未定义的属性‘长度’()”

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

未捕获的 TypeError:无法读取未定义的属性‘长度’

bundle.js:19852 错误:findComponentRoot(..., .0.0.0):无法找到元素。这可能意味着 DOM 意外发生变异(例如,由浏览器),通常是由于在使用表格时忘记了 <tbody>、嵌套标签(如 <form>、<p> 或 <a>)或在 <svg> 父级中使用非 SVG 元素。尝试检查 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;
1个回答

这是一个拼写错误,在状态变量中应该使用 videos 而不是 video:

this.state = { videos: [] };
Mayank Shukla
2017-05-03