React ES6 地图中的箭头抛出语法错误
React ES6 Arrow in Map Throws Syntax Error
我有一个使用 React Ui-Material 管理模板构建的 React 项目。它与 webpack 和一些附加功能捆绑在一起，但由于某种原因，在尝试映射数组时使用箭头函数时会抛出错误。我在项目中的其他模型中使用了箭头函数，并且效果很好。似乎只是在尝试在我的组件内进行映射时。
我已经尝试查看我的 webpack 配置文件中的顺序，研究并尝试添加其他人在我的 babelrc 和 eslintrc 文件中找到的修复程序，但在这一点上，我可以使用一对新的眼睛，因为没有任何效果。
这是我的文件。我会post尽我所能做到彻底。
控制台错误：
ERROR in ./src/containers/CrimeWatch.js
Module build failed: SyntaxError: Unexpected token, expected : (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]
};
非常感谢任何帮助。
这是一个简单的括号错误。
从 ((data, index)) => 中删除右括号之一，使其变为：
((data, index) =>
然后在三元表达式第一部分末尾添加paren，这样) : "Testing" }就变成了：
)) : "Testing" }
我有一个使用 React Ui-Material 管理模板构建的 React 项目。它与 webpack 和一些附加功能捆绑在一起，但由于某种原因，在尝试映射数组时使用箭头函数时会抛出错误。我在项目中的其他模型中使用了箭头函数，并且效果很好。似乎只是在尝试在我的组件内进行映射时。
我已经尝试查看我的 webpack 配置文件中的顺序，研究并尝试添加其他人在我的 babelrc 和 eslintrc 文件中找到的修复程序，但在这一点上，我可以使用一对新的眼睛，因为没有任何效果。
这是我的文件。我会post尽我所能做到彻底。
控制台错误：
ERROR in ./src/containers/CrimeWatch.js Module build failed: SyntaxError: Unexpected token, expected : (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]
};
非常感谢任何帮助。
这是一个简单的括号错误。
从 ((data, index)) => 中删除右括号之一，使其变为：
((data, index) =>
然后在三元表达式第一部分末尾添加paren，这样) : "Testing" }就变成了：
)) : "Testing" }