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

如果代码真的如图所示，那么您正在尝试使用尚未使用该语言的语言功能（“类字段”），它仍然是stage 3 proposal。你需要确保你正在使用句柄转换的任何转换器。

如果您不想使用类字段，请在构造函数中定义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>
  }
}

如何在反应组件中定义状态？

2 个答案: