Status nicht direkt mutieren. Verwenden Sie setState() reagieren/nein-direct-Mutation-Zustand

Question

Ich habe diesen Code:

constructor(props) { 
    super(props) 
    this.state = { 
     loginButton: '', 
     benchmarkList: '' 
    } 
    if (props.username == null) { 
     this.state.loginButton = <GoogleButton></GoogleButton> 
    } else { 

    } 
} 

Es gibt mir eine ESLint Warnung:

Nicht Zustand direkt mutieren. Verwenden Sie setState() react/no-direct-mutation-state.

Nun, was soll ich tun, was ich nicht setState innerhalb constructor direkt verwenden kann, wie es error erstellt und wie diese Aktualisierung gibt mir Fehler.

Answer 1

Zunächst einmal wir sollten die UI-Komponenten innerhalb Zustand nicht speichern Variable sollte Zustand nur Daten enthalten. Alle UI-Teil sollte innerhalb render Methode sein.

Wenn Sie eine Komponente auf der Grundlage von Daten render möchten dann verwenden Sie conditional rendering. Überprüfen Sie den Wert this.state.loginButton, und wenn es null ist, dann rendern Sie diese Schaltfläche.

So:

constructor(props) { 
    super(props) 
    this.state = { 
     loginButton: props.username, 
     benchmarkList: '' 
    } 
} 

render(){ 
    return(
     <div> 
      {!this.state.loginButton ? <GoogleButton></GoogleButton> : null} 
     </div> 
    ) 
} 

Im Idealfall sollten wir nicht mehr nur den props Wert in state auch, so direkt this.props.username verwenden, ich habe das, weil nicht weiß, über den vollständigen Code.

Answer 2

constructor(props) { 
    super(props) 
    this.state = { 
     loginButton: props.username == null? <GoogleButton></GoogleButton>: '', 
     benchmarkList: '' 
    } 
    } 

Oder Sie können setState verwenden in componentWillMount()

componentWillMount(){ 
    let loginButton = props.username == null? <GoogleButton></GoogleButton>: ''; 
    this.setState({loginButton: loginButton}); 
} 

Answer 3

Wie Status innerhalb constructor in ReactJS zu aktualisieren?

Erstellen Sie die Daten-Struktur, ändern Sie es als notwendig, und in dem Zustand am Ende zuweisen, wenn alles getan ist:

constructor(props) { 
    super(props) 
    let state = { 
     loginButton: '', 
     benchmarkList: '' 
    } 
    if (props.username == null) { 
     state.loginButton = true 
    } else { 
     state.loginButton = false 
    } 
    this.state = state 
}