Javascript ES6在React中定义状态的方法

我想这样使用state:

class Checkout extends Component {
    state = {
        ingredients: null,
        totalPrice: 0
    };

但我得到的错误是，

意外标记=

，我知道这可以用babel插件转换类属性来修复，不幸的是，它在我的情况下不起作用。
这是我的包。json

"babel": {
    "presets": [
      "env",
      "react-app"
    ],
    "plugins": ["transform-class-properties"]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.1.0"
  }

---

你知道这里还有什么不对劲吗？

做你想做的事情的典型方法是在构造函数中设置

这个。state

：

class Checkout extends Component {
    constructor() {
        this.state = {
            // Whatever keys and values you want here
        }
    }
}

试试看。它包括

转换类属性

和其他内容。并将其添加到您的babel

预设

阵列中

"babel": {
  "presets": [
    "env",
    "react-app",
    "stage-2"
  ]
}

这将允许您定义

状态

ES6方式

---

另外，建议通过

.babelrc

文件启用babel预设。它应该放在项目根目录中。

问题与

Eslint

有关。 当我安装了

babel eslint

并将parcer选项添加到

.eslintrc

时，这个错误消失了

"parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],

---

是巴贝尔抛出了错误，还是你的浏览器。只要它被传输，它看起来就应该工作。@samanime AFAIK这是Babel抛出的。你能在一个小例子（如你共享的例子）上添加Babel错误的完整输出吗？有一个ES6语法（目前为第3阶段）他正试图通过Babel使用它：如果构造函数中不需要使用道具，这通常是首选，因为它避免了调用函数的需要，并消除了必要的

super（props）

调用之类的混乱，在这种情况下Samanime是对的，我并不熟悉。但它是存在的：虽然这会起作用，但它不是他要找的es6字段声明。@Code学徒我会的，但我相信他发布的内容应该会起作用，这意味着有一些错误不能仅仅通过他发布的内容来识别。我要求提供更多信息。如果他发了，我能发现信息，我一定会发一个答案。试着使用他们网站上推荐的

.babelrc

。使用其中一个应该是一样的。与使用

stage-2

或直接使用转换相同。这一切最终都以同样的方式解决。朋友不允许朋友在真实的应用程序中使用stage-X预设。stage预设从本质上讲是不可靠的。它是一个草案（WIP实施）的草案（TC39提案）。理想情况下，应该使用

预设的env

+手工挑选的插件。可信来源：我相信您可以省略

experimentalObjectRestSpread

选项。并设置

ecmaVersion

。