我正在观看有关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}}
答案 0 :(得分:1)
它是一个错字,而不是视频使用状态变量中的视频:
this.state = { videos: [] };