React -简单函数的“错误:模块构建失败: SyntaxError:意外令牌”
React -简单函数的“错误:模块构建失败: SyntaxError:意外令牌”
提问于 2018-06-10 00:17:43
我正在尝试找出这个错误消息，下面是它的出现：
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import Moment from 'react-moment';
import LoadModal from './LoadModal';
import Posts from './Posts';
import NewPost from './NewPost';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: [],
loading: true
};
}
componentDidMount() {
axios.get('/posts')
.then(response => {
this.setState({ posts: response.data, loading: false });
});
}
addPost: function(post) { // <-- HERE's the error
this.setState({ posts : this.state.posts });
}
render() {
return (
<div>
<NewPost addPost={this.addPost}/>
<Posts posts={this.state.posts} loading={this.state.loading} />
</div>
)
}
}
export default App错误消息指向此行：
addPost: function(post) {我在谷歌上搜索这个问题，发现我可能遗漏了webpack配置中的某些部分-这是我的package.json
{
"name": "@rails/webpacker",
"version": "3.2.2",
"description": "Use webpack to manage app-like JavaScript modules in Rails",
"main": "package/index.js",
"files": [
"package",
"lib/install/config/webpacker.yml"
],
"engines": {
"node": ">=6.0.0",
"yarn": ">=0.25.2"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"case-sensitive-paths-webpack-plugin": "^2.1.1",
"compression-webpack-plugin": "^1.1.6",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"glob": "^7.1.2",
"js-yaml": "^3.10.0",
"node-sass": "^4.7.2",
"path-complete-extname": "^0.1.0",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"uglifyjs-webpack-plugin": "^1.1.8",
"webpack": "^3.10.0",
"webpack-manifest-plugin": "^1.3.2"
},
"devDependencies": {
"eslint": "^4.17.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.1",
"jest": "^22.2.1"
},
"jest": {
"testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",
"roots": [
"<rootDir>/package"
]
},
"scripts": {
"test": "jest",
"lint": "eslint {package,lib}/"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rails/webpacker.git"
},
"author": "David Heinemeier Hansson <david@basecamp.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/rails/webpacker/issues"
},
"homepage": "https://github.com/rails/webpacker"
}我在这里添加了这个块：
"babel": {
"presets": [
"es2015",
"stage-0",
"react"
]
},但它并没有解决这个错误，它仍然存在。
我还遗漏了什么？
提前谢谢你。
回答 2
Stack Overflow用户
发布于 2018-06-10 00:37:16
你试过写这样的函数吗?这不会显示任何编译时错误。
addPost(post) { // <-- HERE's the error
this.setState({ posts : this.state.posts });
}Stack Overflow用户
发布于 2018-06-10 00:43:03
尝试更改
addPost: function(post) { // <-- HERE's the error
this.setState({ posts : this.state.posts });
}至
addPost(post) {
this.setState({ posts : this.state.posts });
}在ES6中，它可以是：
addPost = post => {
this.setState({ posts : this.state.posts });
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50776235
复制相关文章
相似问题