localStorage mit Reaction verhält sich sehr unregelmäßig

Question

Ich versuche, eine Profilkomponente nur anzuzeigen, wenn ein Benutzer angemeldet ist. Ich verwende LocalStorage, um zu speichern, ob der Benutzer angemeldet ist oder nicht. Selbst wenn der boolesche Wert userLoggedIn den Wert false hat, wird die Komponente gerendert. Ich bin mir sicher, dass ich einen wirklich dummen Fehler mache. Entschuldigung im Voraus!

Ich verwende lokalen Zustand, um zu entscheiden, ob ich die Komponente rendern möchte oder nicht. Wenn die Komponente geladen wird, nenne ich:

constructor(props){ 
     super(props); 
     this.state={showDropdown: false, userLoggedIn: false}; 
} 

Dann, wenn die Komponentenhalterungen, ich den userLoggedIn Zustand gesetzt entweder wahr oder falsch.

componentDidMount(){ 
    this.setState({userLoggedIn:    
    localStorage.getItem("userLoggedIn")}); 
} 

Wenn der Benutzer anmeldet, stelle ich die localstorage boolean true mit:

localStorage.setItem('userLoggedIn', true); 

Dies geschieht in einem Action-Schöpfer. Ich verwende Dev-Tools, um den lokalen Speicher zu überprüfen, um zu überprüfen, ob dies funktioniert.

Dann in meiner Komponente, mache ich dies durch den Aufruf eine Funktion:

{this.renderProfileButton()} 

Die Funktion ist:

renderProfileButton(){     

    console.log("renderProfileButton:" 
    +localStorage.getItem("userLoggedIn")); 
    if(this.state.userLoggedIn){ 
      return(
       <ProfileContainer userLoggedIn= {this.state.userLoggedIn}> 
        <IconImage src="/static/profilepic.png" onClick=  
         {()=>{this.toggleDropdown()}} /> 
         <ProfileDropdown showDropdown=  
          {this.state.showDropdown}> 
         <NavBarArrowDiv/> 
         <DropdownContent> 
          <LabelGrey onClick={()=>{this.logOutUser(); 
           this.toggleDropdown();}}> Logout 
          </LabelGrey> 
         </DropdownContent> 
        </ProfileDropdown> 
       </ProfileContainer> 
      ); 
     } 
} 

Answer 1

Der Grund hierfür ist, localstorage alles speichert in string Format, auch Ihre booloen Wert wird als 'true', 'false' gespeichert, so dass Sie entweder die string überprüfen oderverwenden müssenes boolean wieder, wie diese zu konvertieren:

componentDidMount(){ 
    this.setState({userLoggedIn:    
     JSON.parse(localStorage.getItem("userLoggedIn")) 
    }); 
} 

oder in diesem function die string überprüfen, wie folgt aus:

renderProfileButton(){     

    console.log("renderProfileButton:" , localStorage.getItem("userLoggedIn")); 
    if(this.state.userLoggedIn == 'true'){ //check 'true' here 
    .... 

Answer 2

Sie Artikel in localStorage als String gespeichert ist, müssen Sie verwenden es ist wie eine Zeichenfolge wie

componentDidMount(){ 
    var userLoggedIn = (localStorage.getItem("userLoggedIn") === "true") ? true: false 
    this.setState({userLoggedIn:    
    userLoggedIn}); 
}