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，其中包含：

localStorage.setItem('userLoggedIn', true);

这发生在动作创建者身上。我使用开发工具来检查localstorage以验证它是否有效。

然后，在我的组件中，我通过调用函数来渲染它：

{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以[{1}}格式存储所有内容，即使您的string值也会保存为booloen，{{1} }，所以您需要检查'true'或使用'false'再次将其转换为string，如下所示：

JSON.parse

或在boolean内查看componentDidMount(){ this.setState({userLoggedIn: JSON.parse(localStorage.getItem("userLoggedIn")) }); }，如下所示：

function

Answer 2

localStorage中的您的项目存储为String，您需要像字符串一样使用它

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

带有React的localStorage行为非常不稳定

2 个答案: