Question

所以我有一个特定的代码。问题是它暂时无法正常工作，而应该正常工作。我需要刷新页面才能工作。

如果LocalStorage中的用户为null，则应呈现如果LocalStorage中的用户存在，则不应该渲染

它可以使用，但是如何在登录后（而不是刷新页面后）将其改进为可以使用？

我应该使用其他反应生命周期方法吗？

class Navbar extends React.Component {

    constructor(props){
        super(props)
        this.state ={
            user: null
        }
    }

    componentDidMount(){
        const user = JSON.parse(localStorage.getItem('user'));
        this.setState({
            user: user
        },
        console.log('test'+ this.state.user)
        )
    }

    render(){
        return(
            <div>
            { !this.state.user ?
            <div className ="navbar">
                <Logo/>
                <Menu/>
                <PanelOptions/>
            </div>
             : null}
             </div>
        );
    }
}

Answer 1

我应该使用其他反应生命周期方法吗？

不，这没有帮助。没有观察到本地存储更改，这不能成为重新呈现的原因。

将用户数据存储在本地存储中的原因是什么？在组件之间共享数据不应该是主要的。

在道具或状态更改时重新渲染组件。您可以从父状态（可能处理登录过程）传递一些值（例如isLogged或简单地user）。如果登录是在兄弟姐妹中处理的，则您需要lifting state up-一种基本的反应技术。

Answer 2

看一下组件，看来它可以是功能组件。

然后可以从呈现NavBar组件的父组件中以道具的形式发送用户。

export default NavBar = (props) => {
if(!props.user)
{
   return (
   <div className ="navbar">
     <Logo/>
     <Menu/>
     <PanelOptions/>
    </div>
  )
}
else
{
 return null
}
}

如何渲染组件取决于角色

2 个答案: