地图中的React ES6箭头引发语法错误

时间：2017-12-10 23:53:09

标签： reactjs webpack ecmascript-6 babel isparta

我有一个使用React Ui-Material Admin Template构建的React项目。它捆绑了webpack和一些其他功能，但由于某些原因，它在尝试映射数组时使用箭头函数时会引发错误。我在项目中的其他模型中使用箭头函数，它工作正常。它似乎只是在尝试在我的组件中进行映射时。

我已经尝试在我的webpack配置文件中查看事物的顺序，研究并尝试了其他人在我的babelrc和eslintrc文件中找到修复的内容，但此时，我可以使用一双新鲜的眼睛，因为没有任何效果。

这是我的档案。我会发布我可以做的所有事情。

控制台出错：

   ./src/containers/CrimeWatch.js中的错误   模块构建失败：SyntaxError：意外的令牌，预期：（​​79:90）

我的组件抛出错误：

import React, { PropTypes } from 'react';
import { observer, inject } from 'mobx-react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';

@inject('crimeModel')
@observer
class CrimeWatch extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 1,
      crimes: [],
      defaultLat: 30.4583,
      defaultLng: -91.1403,
      zoom: 12
    };
  }

  handleChange = (event, index, value) => {
    this.setState({value});
  }

  render() {

    const AnyReactComponent = ({ text }) => <div>{text}</div>;

    const styles = {
      button: {
        margin: 12,
      },
    };

    return(
      <div className="page-containers crimewatch">
        <DropDownMenu value={this.state.value} onChange={this.handleChange}>
          <MenuItem value={1} primaryText="Select a crime type" />
          <MenuItem value={"ASSAULT"} primaryText="Assault" />
          <MenuItem value={"BATTERY"} primaryText="Battery" />
          <MenuItem value={"CRIMINAL DAMAGE TO PROPERTY"} primaryText="Criminal Damage to Property" />
          <MenuItem value={"FIREARM"} primaryText="Firearm" />
          <MenuItem value={"HOMICIDE"} primaryText="Homicide" />
          <MenuItem value={"INDIVIDUAL ROBBERY"} primaryText="Individual Robbery" />
          <MenuItem value={"NARCOTICS"} primaryText="Narcotics" />
          <MenuItem value={"RESIDENTIAL BURGLARY"} primaryText="Residential Burglary" />
          <MenuItem value={"THEFT"} primaryText="Theft" />
          <MenuItem value={"VEHICLE BURGLARY"} primaryText="Vehicle Burglary" />
          <MenuItem value={"VICE"} primaryText="Vice" />
          <MenuItem value={"OTHER"} primaryText="Other" />
        </DropDownMenu>
        <br/>
        <RaisedButton
          label="Search"
          primary={true}
          style={styles.button}
          onClick={() => this.props.crimeModel._fetchCrime(this.state.value)}
        />
        <br/>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Address</TableHeaderColumn>
              <TableHeaderColumn>Status</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
          {this.props.crimeModel.crimes ? this.props.crimeModel.crimes.map((data, index)) => (
            <TableRow>
              <TableRowColumn>1</TableRowColumn>
              <TableRowColumn>{data.a_c}</TableRowColumn>
            </TableRow>
          ) : "Testing" }
          </TableBody>
        </Table>
      </div>
    )
  }
}

export default CrimeWatch;

TableBody的地图部分中的箭头是引发错误的内容。

的package.json：

{
  "name": "react-material-admin-template",
  "version": "0.0.1",
  "description": "Admin template using React and Material-UI",
  "engines": {
    "npm": ">=3"
  },
  "scripts": {
    "start": "npm-run-all --parallel test:watch open:src lint:watch",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run clean-dist && npm run lint && npm run test",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
    "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "npm run test -- --watch",
    "open:cover": "npm run test:cover && open coverage/index.html"
  },
  "author": "Rafael Zeffa",
  "license": "MIT",
  "dependencies": {
    "babel-eslint": "8.0.3",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "flexboxgrid": "6.3.1",
    "font-awesome": "4.7.0",
    "google-map-react": "0.25.0",
    "history": "4.5.1",
    "lodash": "4.17.4",
    "material-ui": "0.17.0",
    "mobx": "3.4.1",
    "mobx-react": "4.3.5",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-icons": "2.2.7",
    "react-router": "3.0.2",
    "react-tap-event-plugin": "2.0.1",
    "recharts": "0.20.8"
  },
  "devDependencies": {
    "autoprefixer": "6.7.3",
    "babel-cli": "6.23.0",
    "babel-core": "6.23.1",
    "babel-loader": "6.3.2",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-remove-prop-types": "0.3.2",
    "babel-preset-es2015": "6.22.0",
    "babel-preset-react": "6.23.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.22.0",
    "babel-register": "6.23.0",
    "browser-sync": "2.18.8",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "coveralls": "2.11.16",
    "cross-env": "3.1.4",
    "css-loader": "0.26.1",
    "enzyme": "2.7.1",
    "eslint": "3.15.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "4.0.0",
    "eslint-plugin-react": "6.10.0",
    "eslint-watch": "3.0.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.10.0",
    "html-webpack-plugin": "2.22.0",
    "isparta": "4.0.0",
    "mocha": "3.2.0",
    "node-sass": "4.5.0",
    "npm-run-all": "4.0.1",
    "open": "0.0.5",
    "postcss-loader": "1.3.1",
    "prompt": "1.0.0",
    "react-addons-test-utils": "15.4.2",
    "redux-immutable-state-invariant": "1.2.4",
    "replace": "0.3.0",
    "rimraf": "2.5.4",
    "sass-loader": "6.0.1",
    "sinon": "1.17.7",
    "sinon-chai": "2.8.0",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.1",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },
  "keywords": [
    "react",
    "reactjs",
    "material",
    "material-ui",
    "template",
    "admin"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/rafaelhz/react-material-admin-template"
  }
}

.babelrc：

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ],
      "plugins": [
        "transform-decorators-legacy"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types",
        "transform-decorators-legacy"
      ]
    }
  }
}

webpack.config.dev.js：

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';

export default {
  debug: true,
  devtool: 'cheap-module-eval-source-map',
  noInfo: true,
  entry: [
    './src/webpack-public-path',
    'webpack-hot-middleware/client?reload=true',
    './src/index'
  ],
  target: 'web',
  output: {
    path: `${__dirname}/src`,
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.ejs',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    })
  ],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}
    ]
  },
  postcss: ()=> [autoprefixer]
};

非常感谢任何帮助。

1 个答案:

答案 0 :(得分：1)

您的括号出现了一个简单的错误。 从((data, index)) =>中删除一个右侧的parens，使其变为：

((data, index) =>

然后在三元表达式的第一部分末尾添加一个paren，以便) : "Testing" }成为：

)) : "Testing" }
相关问题
最新问题