Question

我正在尝试运行此代码，并期望有5个相同的文本视频。相反，我得到了这个。请帮我解决一下。我附上了所有错误截图以及代码。

它工作正常如果我只是试图打印数组的计数为5它工作正常。但是，如果我尝试下面的代码，它就会出现错误。它工作正常没有错误在终端，但这是在一个控制台，而不是打印Video 5时间应该。

search_bar.js

import React, { Component } from 'react';

class SearchBar extends Component {

    constructor(props) {
        super(props);

        this.state = { term: '' };
    }

    render() {
        return (
            <div>
                <input
                    value={this.state.term}
                    onChange={event => this.setState({ term: event.target.value })} />
            </div>
        );
    }
}

export default SearchBar;

index.js

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

const API_KEY = 'xxxxxxxxxxxxxxx'

class App extends Component {

    constructor(props) {
        super(props);

        this.state = { videos: [] };

        YTSearch({ key: API_KEY, term: 'trump' }, (videos) => {
            this.setState({ videos });
        });
    }

    render() {
        return (
            <div>
                <SearchBar />
                <VideoList videos={this.state.videos} />
            </div>
        );
    }
}


//Take this component's generated HTML and put it on the page.(in the DOM) 

ReactDOM.render(<App />, document.querySelector('.container'));

video_list.js

import React from 'react';
import VideoListItem from './video_list_item';

const VideoList = (props) => {
    const videoItems = props.videos.map((video) => {
        return <VideoListItem key={video.etag} video={video} />
    });

    return (
        <ul className="col-md-4 list-group">
            {videoItems}
        </ul>
    );
};

export default VideoList;

video_detail.js

import React from 'react';

const VideoListItem = (props) => {
    return <ul>Video</ul>
};

export default VideoListItem;

Answer 1

此错误：

 Element type is invalid: expected a string (for built-in components) or a class/function

通常是因为你的import语句而发生的。仔细检查import语句。正如Mayank Shukla在评论中提到的那样，您在import语句中使用不同的文件名导入VideoListItem。

您还需要在VideoListItem组件中返回<li>Video</li>。

错误：元素类型无效：预期字符串React

1 个答案: