與React的localStorage行爲非常不正常

Question

我試圖僅在用戶登錄時顯示配置文件組件。我正在使用localStorage來存儲用戶是否登錄。即使布爾型userLoggedIn爲false，也會呈現組件。我確信我犯了一個非常愚蠢的錯誤。提前對不起！

我使用本地狀態來決定是否要渲染組件。當組件加載時，我打電話給：

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

然後，當組件掛載時，我將userLoggedIn狀態設置爲true或false。

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

當用戶登錄時，我的localStorage的布爾值設置爲true有：

​​

這發生在一個動作的創造者。我使用開發工具來檢查本地存儲以驗證這是否有效。

{this.renderProfileButton()} 

功能是：：

然後，在我的部分，我通過調用函數使這個

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

原因是，localstorage把所有東西存在string格式，甚至是你的booloen值將保存爲'true','false'，因此無論您需要檢查string還是使用JSON.parse再次轉換到boolean，像這樣：

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

或者說function內檢查string，就像這樣：

renderProfileButton(){     

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

Answer 2

在localStorage你項存儲爲String，則需要使用它就像一個字符串一樣

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