Reactjs - Webpack编译错误：模块构建失败

Posted 2021-05-03

我是React的新手。我一直在关注Udemy的React课程，我想出了一个问题。错误很明显，我试图解决它，但我无法确定我的代码有什么问题。

这是我的项目结构

这是我在控制台中遇到的错误。

ERROR in ./src/components/video_list.js
Module build failed: SyntaxError: Unexpected token (5:8)

  3 | 
  4 | class VideoList extends Component{
> 5 |   const videoItems = this.props.videos.map((video) => {
    |         ^
  6 |     return <VideoListItem video={video} />
  7 |   });
  8 | 

 @ ./src/index.js 21:18-52
webpack: Failed to compile.

这是我的错误代码的源代码，即'video_list.js'

import React, {Component} from 'react';
import VideoListItem from './video_list_item';

class VideoList extends Component{
  const videoItems = this.props.videos.map((video) => {
    return <VideoListItem video={video} />
  });

  render(){
    return (
      <ul className="col-md-4 list-group">
        {videoItems}
      </ul>
    );
  }
}

export default VideoList;

我已正确导入和导出所有内容。因为如果我将上面的代码改为此，它可以完美地工作（编译）并给出预期的结果。

import React, {Component} from 'react';
import VideoListItem from './video_list_item';

class VideoList extends Component{
  // const videoItems = this.props.videos.map((video) => {
  //   return <VideoListItem video={video} />
  // });

  render(){
    return (
      <ul className="col-md-4 list-group">
        {this.props.videos.length}
      </ul>
    );
  }
}

export default VideoList;

我的代码出了什么问题？我的videoItems功能有什么问题。

这是关于udemy的this教程。在课程中，它遵循基于组件的结构。但作为我的偏好，我使用基于类的结构（class VideoList extends Component）

答案

将videoItems函数移动到render()函数并解决了这个问题。这是一个混乱。