[英]Beginner React : Render Syntax Error
I'm a beginner in React, so this might be a silly error.. 我是React的初学者,所以这可能是一个愚蠢的错误。
I can't seem to get my render function to work.. 我似乎无法使我的渲染功能正常工作。
I'm getting: 我越来越:
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
And my code looks like this: 我的代码如下所示:
I matched my code to a tutorial online, and I don't see any obvious problems with it, but like I said, I'm a beginner so maybe I'm not understanding how JSX and rendering works? 我将代码与在线教程匹配,但看不到任何明显的问题,但是就像我说的,我是一个初学者,所以也许我不了解JSX和渲染的工作原理?
Please let me know why this is throwing errors... 请让我知道为什么这会引发错误...
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>
)
}
You don't need that extra return
wrapping the map 您不需要包装地图的额外
return
return {
this.props.loadedVideos.map(...
...
}
Just do: 做就是了:
return(
<ul>
{
this.props.loadedVideos.map(
(videos, index) => {
return <li
className="videoItem"
key={videos.id.videoId}>{videos.snippet.title} | {videos.snippet.channelTitle}
</li>
}
)
}
</ul>
)
As @Tholle explained in the comment you can use JS expressions in JSX. 正如@Tholle在评论中解释的那样,您可以在JSX中使用JS表达式。 For an expression you don't need a return.
对于表达式,您不需要返回。 You may need it maybe in a callback function as in your code.
您可能需要在代码中的回调函数中使用它。 But, since you are using an arrow function you don't need curly braces for your function body and
return
. 但是,由于您使用的是箭头功能,因此您不需要为函数主体使用大括号并
return
。 This should work and slightly clear from your code: 这应该可以工作,并且从您的代码中可以稍微看出一点:
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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.