我的组件中的React Invariant违​​规错误

Question

我正在学习ReactJS并尝试将Youtube API数据渲染到组件中，我偶然发现了以下警告和错误。我试图了解它们背​​后的原因是什么，但我对所发生的事情毫无头绪。

  

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查App的呈现方法。

     

未捕获的不变违规：元素类型无效：预期a    string（用于内置组件）或类/函数（用于复合    组件）但得到：对象。检查渲染方法    App。

     

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查App的呈现方法。

     

错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查App的呈现方法。

     

未捕获的TypeError：无法读取属性＆＃39;道具＆＃39;未定义的

我正在处理的代码存在问题，如下所示。我确信这与我的App组件有关，以及我如何设置我的道具对象，但我无法确定问题的根源。

index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list';

const API_KEY = "not showing the real key here for obvious reasons"; 

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"));

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;

Answer 1

简单修复：

import VideoList from './components/video_list';

该文件为空，我的代码位于video_detail.js，因此我必须将其移至正确的文件video_list.js