ReactJS - 元素类型无效错误
ReactJS - Element type is invalid error
我在下面的代码中遇到以下错误,但是我无法确定我的组件出了什么问题。任何帮助不胜感激!
错误:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象。检查
App
的渲染方法。
索引.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search'; // Used to interact with Youtube API
import SearchBar from './components/search_bar'; // custom search bar component
import VideoList from './components/video_list'; // custom youtube video list component
const API_KEY = "key not shown here for privacy purposes";
class App extends Component {
constructor(props){
super(props);
this.state = {videos: []};
YTSearch({key: API_KEY, term: 'sufboards'}, (videos) => {
this.setState({videos});
});
}
render(){
return (
<div>
<SearchBar />
<VideoList videos={this.state.videos} />
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector(".container"));
webpack.config.js
应乔丹亨德里克斯的要求。
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
video_detail.js
应巴尔加夫蓬纳帕利的要求
import React from 'react';
const VideoList = (props) => {
return (
<ul className="col-md-4 list-group">
{props.videos.length}
</ul>
);
};
export default VideoList;
search_bar.js
应巴尔加夫蓬纳帕利的要求
import React, {Component} from 'react';
class SearchBar extends Component {
constructor(props){
super(props);
this.state = {term: ""};
}
render(){
return (
<input
onChange={
event => this.setState({
term: event.target.value
})
}
value = {this.state.term}
/>
);
}
}
export default SearchBar;
我的其他组件所需的任何额外代码将根据要求添加到此处。
简单的修复:
import VideoList from './components/video_list';
文件为空,我的代码在video_detail.js
,所以我不得不将其移动到正确的文件中,video_list.js
相关文章:
- Jquery Datatables错误:无效的JSON基元:draw
- 错误:语法错误,无法识别的表达式:不支持的伪:无效/RectJS/Unit Testing
- JavaScript错误无效的限定符
- 如何使用JavaScript粘贴原始二进制文件而不出现“无效字符”错误
- 如何修复FF和IE中的Javascript无效日期错误
- 未捕获错误:Google Fusion表上的列索引无效
- 从ASP转换后出现无效ViewState错误.NET 1.1到ASP.净额3.5
- 错误:格式为整数的 javascript 键无效
- 在正则表达式中添加 (?i) 会导致 javascript 中出现错误“无效的正则表达式组”
- 使用JSON.parse时出现无效字符javascript错误
- 由 if / else 语句中的无效语法导致的语法错误
- 解析 JSON 时出现无效字符错误
- ReactJS - 元素类型无效错误
- Facebook JavaScript SDK 检查用户是否为粉丝(错误:指定的版本无效)
- Jqx图表给出错误错误:
属性高度=“-1”的负值无效 - IE 中的调用对象无效错误
- 更改无效(错误答案)的段落颜色和文本颜色
- 将包含内容和元数据的文件上传到谷歌文档会返回400无效/错误请求
- Foundation Abide-如果先前的输入无效,则在有效输入上触发无效错误
- 在解析JavaScript SDK时出现对象名称无效错误