gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:30:05 24 4
gpt4 key购买 nike

我正在构建这个简单的 React 应用程序,我遇到了这个错误,我试图调试它但还没有成功。我确信我一定遗漏了一些很明显的重要信息。

*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;

我一定是遗漏了什么导致了这个错误。我错过了什么?

最佳答案

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

关于javascript - 必须返回 React 有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48401387/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com