错误消息 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