Wie mehrere Instanzen von getInitialState in Reactjs haben?

Question

Dies ist mein Code in React. Ich habe mehrere Instanzen von getInitialState für verschiedene Funktionen. Ich stelle jedoch fest, dass es ein Problem geben kann, sie alle auf diese Weise zu führen.

getInitialState: function(){ 
if (localStorage.getItem('something')) 
{return {signedin: true}} 
else {return {signedin: false}} 
}, 

getInitialState:function(){ 
return {error: true} 
}, 

getInitialState:function(){ 
return {fliphouse: false} 
}, 

Um die zweite Instanz von getInitialState zu erklären, wie es ist, funktioniert nicht. Das heißt, es sei denn, ich kippe die Reihenfolge der zweiten und dritten getInitialState. Wenn ich das tue, läuft der Code wie es soll. Aber ich habe das Gefühl, React versucht mir etwas zu sagen.

Ist das normalerweise der Weg, React-Code innerhalb einer Komponente zu organisieren?

Answer 1

Sie können sie alle in dem gleichen Objekt definieren:

getInitialState() { 
    return { 
    signedIn: !!localStorage.getItem('something'), 
    error: false, 
    fliphouse: false 
    }; 
} 

Sie können sie in der Komponente einzeln überall ändern (außer in der render() Funktion), zB:

this.setState({ error: true }) // causes a new render 

Answer 2

Dies ist nicht der richtige Weg, den Ausgangszustand der Komponente anzugeben. Die anfängliche Statusfunktion wird nur einmal aufgerufen, wenn die Komponente geladen werden soll. Hier setzen Sie den Status der Komponente (welche Variablen oder Objekteigenschaften Sie benötigen) und aktualisieren sie dann entsprechend setState in anderen Methoden wie componentDidMount usw.

Also in Ihrer Frage würde ich sagen, alle 3 Variablen signedIn Fehler und fliphouse im Zustandsobjekt und dann dieses Objekt aktualisieren. Also würde eine einzelne initialState-Funktion ausreichen.