必须返回 React 有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象答案

【问题标题】：React valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object必须返回 React 有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象
【发布时间】：2018-07-02 06:04:42
【问题描述】：

我正在构建这个简单的反应应用程序，我遇到了这个错误，我试图调试但还没有乐趣。我确信我一定错过了一些可能很明显的重要事情。

*Error: VideoDetail.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.*

index.js

import React, {
    Component
} from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import VideoDetail from './components/video_details';
const API_KEY = 'XXXXXXXXXXXXXXXXXXXXXXX';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            videos: []
        };
        YTSearch({
            key: API_KEY,
            term: 'cute cats'
        }, (videos) => {
            this.setState({
                videos
            }); 
        });
    }

    render() {
        return (
          <div >
            <VideoDetail video = {this.state.videos[0]}/> 
          </div>
        );
    }

}

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

video_details.js

import React from 'react';

const VideoDetail = ({ video }) => {
    if (!video) {
        return (
            <div>
                Loading...
            </div>
        );
    }
    const videoId = video.id.videoId;
    const url = `https://www.youtube.com/embed/${videoId}`;
    return
    (
        <div className='video-details col-md-8'>
            <div className='embed-responsive embed-responsive-16by9'>
                <iframe className='embed-responsive-item' src={url}> </iframe>
                <div className='details'>
                    <div> {video.snippet.title} </div>
                    <div> {video.snippet.description} </div>
                </div>
            </div>
        </div>

    );
}
module.exports = VideoDetail;

我一定是遗漏了导致此错误的某些内容。我错过了什么？

【问题讨论】：

代替module.exports = VideoDetail试试export default VideoDetail;
@Andy 做到了。但没有快乐。

标签： javascript reactjs react-native react-router react-redux

【解决方案1】：

您忘记导入 VideoDetail 组件。

由于您已经在 VideoDetail.js 中使用 ES6

export default VideoDetail;

然后导入它：

import VideoDetail from "./VideoDetail";

【讨论】：

【解决方案2】：

我发现了问题所在。在 video_details.js 文件中，我拥有的第二个 return 前面没有任何内容。所以它应该是 return ( 代替。将 return 留在一行上而没有任何内容会导致错误。

【讨论】：

关键是您必须至少将第一个括号与返回值放在同一行。 return 语句不能单独留在标志线上。

【解决方案3】：

问题在于您的 VideoDetail 反应组件。您的 return 语句的括号在下一行。因此，您最终会返回undefined。这不是有效的反应组件，因此您会收到错误。

从某种意义上说，你的 react 组件最终看起来像这样。

function VideoDetail() {
  return
  <div></div>;
}

这不是一个有效的 javascript 返回语句。

如果您希望返回确认您的以下代码，括号必须从同一行声明，并包含以下代码。

function VideoDetail() {
  return (
    <div></div>
);
}

【讨论】：