初学者反应:呈现语法错误

Question

我是React的初学者，所以这可能是一个愚蠢的错误。。

我似乎无法使渲染函数正常工作。。

我得到：

Failed to compile
./src/components/VideoPlayer/VideoList.js
Syntax error: Unexpected token (56:10)
54 |       <ul>
55 |         { 
> 56 |           return (
|           ^
57 |             this.props.loadedVideos.map(
58 |                 (videos, index) => {
59 |                 return <li 

我的代码是这样的：

我将我的代码与在线教程进行了匹配，我没有发现任何明显的问题，但正如我所说，我是一个初学者，所以可能我不了解JSX和渲染是如何工作的？

请让我知道为什么这是抛出错误。。。

render () {
// console.log('>> [VideoList.js] Inside render VIDEOS RECIEVED ',this.props.loadedVideos);
if(!this.props.loadedVideos) return null;

return( 
<ul>
{ 
return {
this.props.loadedVideos.map(
(videos, index) => {
return <li 
className="videoItem" 
key={videos.id.videoId}>{videos.snippet.title} | {videos.snippet.channelTitle}
</li>
}
)
}
}
</ul>
)
}

Answer 1

您不需要额外的return来包装地图

return {
this.props.loadedVideos.map(...
... 
}

只需：

return( 
<ul>
{ 
this.props.loadedVideos.map(
(videos, index) => {
return <li 
className="videoItem" 
key={videos.id.videoId}>{videos.snippet.title} | {videos.snippet.channelTitle}
</li>
}
)          
}
</ul>
)

Answer 2

正如@Tholle在评论中解释的那样，您可以在JSX中使用JS表达式。对于表达式，您不需要返回。您可能在回调函数中需要它，就像在代码中一样。但是，由于您使用的是箭头函数，因此函数体和return不需要大括号。这应该可以工作，并且从您的代码中稍微清楚一点：

render () {
// console.log('>> [VideoList.js] Inside render VIDEOS RECIEVED ',this.props.loadedVideos);
if(!this.props.loadedVideos) return null;
return( 
<ul>
{ 
this.props.loadedVideos.map( videos =>
<li 
className="videoItem" 
key={videos.id.videoId}
>
{videos.snippet.title} | {videos.snippet.channelTitle}
</li> )
}
</ul>
)
}