Javascript 我的组件中出现错误

我正在学习ReactJS，在尝试将Youtube API数据呈现到组件中时，偶然发现以下警告和错误。我试图了解他们背后的原因，但我不知道发生了什么

警告：React.createElement:类型不应为null、未定义、布尔值或数字。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）。检查

App

的渲染方法

未捕获不变冲突：元素类型无效：应为 字符串（用于内置组件）或类/函数（用于复合 组件）但得到：对象。检查的渲染方法

应用程序

警告：React.createElement:类型不应为null、未定义、布尔值或数字。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）。检查

App

的渲染方法

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查

App

的渲染方法

未捕获的TypeError:无法读取未定义的属性“props”

下面是我正在使用的有问题的代码。我确信这与我的应用程序组件以及我如何设置道具对象有关，但我无法确定问题的根源

index.js

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./components/search_bar”导入搜索栏；
从“youtube api搜索”导入搜索；
从“./components/video_list”导入视频列表；
const API_KEY=“出于明显原因，此处未显示实际密钥”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={videos:[]}；
YTSearch（{key:API_key，术语：'suffoards'}，（视频）=>{
this.setState（{videos}）；
});
}
render（）{
返回(
);
}
}
render（，document.querySelector（“.container”）；

视频_detail.js

从“React”导入React；
const VideoList=（道具）=>{
返回(

{props.videos.length}

);
};
导出默认视频列表；

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 React，{Component}来自'React'；
类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={term:”“}；
}
render（）{
返回(
这是我的国家({
术语：event.target.value
})
}
值={this.state.term}
/>
);
}
}
导出默认搜索栏；

简单修复：

从“/components/video_list”导入视频列表

文件是空的，我的代码在
video\u detail.js
中，所以我必须将其移动到正确的文件
video\u list.js
可能是因为无效的html？您正在呈现一个ul而没有li，您应该更改呈现方式。映射元素并为每个视频渲染一个li，或者暂时将ul更改为div以进行测试it@JohnRuddell遗憾的是，这要简单得多。看看我的文件名。我正在从video_列表导入，但我错误地在video_详细信息中输出了代码。Fml
import React from 'react';

const VideoList = (props) => {
    return (
        <ul className="col-md-4 list-group">
            {props.videos.length}
        </ul>
    );
};

export default VideoList;

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;