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

Question

所以我正在创建我的第一个全栈网站，一旦用户登录，它就会存储在 localStorage 中，我想在他登录后在我的 header 中显示用户名，但我的 header 没有重新呈现，所以没有任何反应：这是登录前的header header

这就是我希望登录后的样子：登录后 header这是我的布局代码：

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

const Layout = (props) => {

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

export default Layout;

这是我的 Header 中的工具栏：

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。

在反应中，如果您希望组件在某些数据更改时重新呈现，则该信息必须在组件 state 中。在您的代码中，当前用户是一个常量，而不是绑定到组件的 state。这就是它如何自动重新- 当用户登录时呈现：

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;

在官方文档中查看更多关于 state 的信息。