ReactJS - 元素类型无效错误

ReactJS - Element type is invalid error

本文关键字:无效 错误 类型 元素 ReactJS      更新时间:2023-09-26

我在下面的代码中遇到以下错误,但是我无法确定我的组件出了什么问题。任何帮助不胜感激!

错误:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象。检查 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