如何在React组件中定义状态？

Question

我对React很陌生，想知道这应该如何工作：

class App extends Component {
> 4 |   state = {
    |         ^
  5 |     bands: [],
  6 |     concerts: []
  7 |   }

这里的错误信息：

ERROR in ./src/App.js
Module build failed: SyntaxError: Unexpected token (4:8)

编辑（整个组件）：

import React, { Component } from 'react'

class App extends Component {
  state = {
    bands: [],
    concerts: []
  }
  render() {
    return <div>hei</div>
  }
}

export default App

一些解决方案？

Answer 1

如果该代码确实如所示，则您正在尝试使用一种尚未使用该语言的语言功能（“类字段”），它仍然是第3阶段的提议 。 您需要确保使用的任何编译器都可以处理该编译。

如果您不想使用类字段，请在构造函数中定义state属性：

class App extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      bands: [],
      concerts: []
    };
  }
  render() {
    return <div>hei</div>
  }
}

Answer 2

一种选择是将状态放入构造函数中：

class App extends Component {
  constructor(props) { 
    super(props)
    this.state = {
      bands: [],
      concerts: []
    };
  }
  render() {
    // Here you can access to this.state
    return <div>hei</div>
  }
}