Wie definiere ich den Zustand in den reagierenden Komponenten?

Ich bin ganz neu zu reagieren und sich fragen, wie diese funktionieren sollte:Wie definiere ich den Zustand in den reagierenden Komponenten?

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

hier die Fehlermeldung:

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

Edit (die gesamte Komponente):

import React, { Component } from 'react' 

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

export default App

Einige Lösung dazu?

Quelle

2017-10-31 König des Lichts

ganze Komponente sorgen. –

Es sieht so aus, als ob Sie eine Nicht-Standard-Sprachfunktion verwenden (korrigieren Sie mich, wenn ich falsch liege und dies zu einem Standard geworden ist). Daher benötigen Sie eine zusätzliche babel-transform, um diese Notation von Klasseneigenschaften zu unterstützen: https://babeljs.io/docs/plugins/transform-class-properties/ – m90

Wenn der Code wirklich wie angezeigt aussieht, versuchen Sie eine Sprachfunktion zu verwenden, die noch nicht in der Sprache ist, es ist immer noch ein [Stufe 3-Vorschlag] (https://github.com/tc39/proposal-class-fields). Wohlgemerkt, die meisten React-Transpilation-Setups, die JSX behandeln, enthalten auch das in ihrer Transpilation ... –

Wenn der Code wirklich ist, wie gezeigt, Sie versuchen, eine Sprache-Funktion zu verwenden („Klassenfelder“), die nicht in der Sprache noch, es ist immer noch ein stage 3 proposal. Sie müssen sicherstellen, dass jeder Transpiler, den Sie verwenden, Griffe übernimmt.

Wenn Sie nicht wollen, Klassenfelder verwenden, Ihre state Eigenschaft in einem Konstruktor definieren:

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

Quelle

2017-10-31 17:36:20

@Kinduser Das Snippet ist fast identisch, aber T.J. lieferte zusätzliche Informationen über den Status des Syntaxvorschlags. – lilezek

Eine Möglichkeit wäre, den Zustand in Ihrem Konstruktor zu setzen:

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

Quelle

2017-10-31 17:33:59 lilezek

Wie definiere ich den Zustand in den reagierenden Komponenten?

Antwort

Verwandte Themen