我怎样才能让组件在反应中重新渲染

Question

所以我正在创建我的第一个全栈网站，一旦用户登录，它就会存储在 localStorage 中，我想在他登录后在我的标题中显示用户的姓名，但我的标题没有重新呈现所以什么也没有发生：这是登录前的标题 header

这就是我在登录后想要的样子： header after logging in这是我的布局代码：

import "../assets/sass/categoriesbar.scss";
import Header from "./Header/Header";

const Layout = (props) => {

return ( 
    <>
        <Header/>
        <main>
           { props.children}
        </main>
        
    </>
 );
}

export default Layout;

这是我标题中的工具栏：

const ToolBar = () => {
const history = useHistory();
let currentUser= JSON.parse(localStorage.getItem("user-info"));

const logoutHandler = () => {
 localStorage.clear("user-info");

 history.push("/login");
 };
 return (
   <>
   <div className={classes.NavigationBar}>
   <h1>
     <Link to="/">Pharmashop</Link>
   </h1>
   <NavLinks logout={logoutHandler}/>
   {localStorage.getItem("user-info")? 
     <h5>Welcome {currentUser.name} !</h5>
    : 
    <RegisterButton />
   }
  </div>
  </>
 


);

};

export default ToolBar;

请帮帮我，这很令人沮丧

PS：这是我的第一个 stackoverflow 问题，如果它杂乱无章且不清楚，请原谅我的英语不好。

Answer 1

Hazem，欢迎来到 Stack Overflow。

在 react 中，如果您希望组件在某些数据更改时重新渲染，则该信息必须处于组件状态。在您的代码中，当前用户是一个常量，而不是绑定到组件的状态。这是用户登录时自动重新渲染的方式：

const ToolBar = () => {
    const [currentUser, setCurrentUser] = useState(JSON.parse(localStorage.getItem("user-info")));

    const logoutHandler = () => {
     localStorage.clear("user-info");

     history.push("/login");
     };
     return (
       <>
       <div className={classes.NavigationBar}>
           <h1>
             <Link to="/">Pharmashop</Link>
           </h1>
           <NavLinks logout={logoutHandler}/>
           {currentUser? 
             <h5>Welcome {currentUser.name} !</h5>
            : 
            <RegisterButton />
           }
          </div>
      </>
    );
};

export default ToolBar;

在official documentation 中查看有关状态的更多信息。