Ich habe den folgenden Fehler mit dem folgenden Code, aber ich kann nicht identifizieren, was mit meiner Komponente falsch ist. Jede Hilfe wird geschätzt!ReactJS - Elementtyp ist ungültiger Fehler
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of
App
.
index.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
Als von JordanHendrix angefordert.
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
Als
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
von bhargavponnapalli angefordert Wie bhargavponnapalli
von angefordertimport 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;
Jeder zusätzliche Code, der von meinen anderen Komponenten benötigt wird, wird hier auf Anfrage hinzugefügt.
@JordanHendrix Ich habe das 'webpack hinzugefügt. config.js' als Bearbeitung meiner Frage, hilft das? – AGE
Sind die Such- und VideoList-Funktionen zum Zurückgeben von JSX geeignet? –
@bhargavponnapalli Ja, das sind sie, ich werde sie als Bearbeitung zu meiner Frage hinzufügen, damit Sie sie jetzt überprüfen können. – AGE