Reactjs 在React中隐藏具有本地存储的某些元素

我想在用户尚未登录时隐藏一些导航，因此我使用本地存储来保存用户id，并使用if逻辑来隐藏和显示导航，但当我清除本地存储中的数据并将其与null进行比较时，导航仍然显示

下面是将数据保存在本地存储器中的代码

loginUser = () => {
    Axios.post('http://private-6fdd31-intern1.apiary-mock.com/interns/login', this.state.user)
        .then((res) => {
            if(res.data.role === "admin")
            {
                localStorage.setItem("user", res.data.user_id)
                this.props.history.push('/member-list');
            }
        }, (err) => {
            console.log(err);
        })
}

这是我在单击注销导航时比较和清除数据的方式

handleLogout = () => {
    localStorage.clear("user");
}

render() {
    return(
        <Router>
            <Fragment>
                <div className="navigation">
                    { localStorage.getItem("user") !== null?
                        <Fragment>
                            <Link to="/member-list">Member</Link>
                            <Link to="/override-list">Override</Link>
                            <Link onClick={this.handleLogout} to="/">Logout</Link>
                        </Fragment>
                        : null
                    }
                </div>
                <Route path="/" exact component={routeProps => <Login {...routeProps}/>}/>
                <Route path="/member-list" component={MemberDashboard}/>             
                <Route path="/override-list" component={OverrideDashboard}/>
            </Fragment>
        </Router>
    )
}

handleLogout=（）=>{
localStorage.clear（“用户”）；
}
render（）{
返回(
{localStorage.getItem（“用户”）！==null？
成员
推翻
注销
：null
}
}/>
)
}

react native不会调用

render（）

方法只要没有状态或道具更新，您就需要调用

this.forceUpdate（）

来强制重新渲染。文档：像

---

当您设置为本地存储时，可能会使用状态来保存用户，而手动注销时也会使用状态来保存用户

if(res.data.role === "admin")
{
 this.setState({ user: res.data.user_id})
 localStorage.setItem("user", res.data.user_id)
 this.props.history.push('/member-list');
}

handleLogout = () => {
 localStorage.clear("user");
 this.setState({ user: ""})
}

---

因此，当状态更新时，组件将重新呈现。

我认为您必须在执行

localStorage.clear（“用户”）之后执行
forceUpdate
。该组件未重新呈现。感谢您的回复，如果有其他问题，当它移动到其他组件（在我的案例中是MemberDashboard）时，我需要在显示导航之前重新加载它。我将
this.forceUpdate（）
放在它的
组件didmount上
已经尝试过了。如果使用状态，当您单击“刷新”按钮时，所有状态都将返回其初始值
if(res.data.role === "admin")
{
 this.setState({ user: res.data.user_id})
 localStorage.setItem("user", res.data.user_id)
 this.props.history.push('/member-list');
}

handleLogout = () => {
 localStorage.clear("user");
 this.setState({ user: ""})
}