Question

我正在尝试找出此错误消息，这是它的发生：

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"
    ]
  },

但它没有解决错误，它仍然存在。

我错过了什么？

提前谢谢。

Answer 1

您是否尝试过编写这样的函数？这不会显示任何编译时错误。

addPost(post) { // <-- HERE's the error
      this.setState({ posts : this.state.posts });
    }

Answer 2

尝试更改

addPost: function(post) { // <-- HERE's the error
  this.setState({ posts : this.state.posts });
}

到

addPost(post) { 
  this.setState({ posts : this.state.posts });
}

{p}在ES6中可以是：

addPost = post => { 
  this.setState({ posts : this.state.posts });
}

React - ＆＃34;错误：模块构建失败：SyntaxError：意外的令牌＆＃34;一个简单的功能

2 个答案: