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>
    )
  }

初学者React：渲染语法错误

2 个答案: