Javascript React Komponente mit 2 gibt je nach Bedingung zurück

Question

Ich habe eine Reaktionskomponente und habe eine Bedingung darauf.

Ich möchte eine andere Rückkehr jsx je nach Zustand Ergebnis haben.

Dies ist, was ich habe, aber es gibt nur die letzte zurück.

Hier ist der Code:

import React, { Component } from 'react'; 
import { Redirect } from 'react-router'; 

class Login extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isLoggedIn: sessionStorage.getItem('isLoggedIn'), 
     redirect: false, 
    }; 
    } 

    render() { 

    if (!this.state.isLoggedIn) { 

     return (
     <div> 
      <h1>You are NOT logged in</h1> 
     </div> 
    ); 

    } else { 

     return (
     <div> 
      <h1>You ARE logged in</h1>); 
     </div> 

    } 
    } 
} 

export default Login; 

Wie ich dieses Problem beheben?

Answer 1

Sie haben einen Schließbügel an der falschen Stelle, zum einen. Es sollte nach div und nicht h1 sein. BTW, Es gibt keine Notwendigkeit für die 2. Rückkehr.

render() { return ( <div> <h1>You are { (!this.state.isLoggedIn) ? 'NOT' : '' } logged in</h1> </div> ); }

Answer 2

Nimmt man falsch in sessionstorage gespeichert entsprechenden isLoggedIn

Sie verwenden sollten:

this.state = { 
    isLoggedIn: sessionStorage.getItem('isLoggedIn') === 'true', 
    redirect: false, 
} 

gespeicherten Werte in session sind String. So wird false als 'false' gespeichert werden. Also, this.state.isLoggedIn ist immer wahr.