时间戳

首页 > 解决方案 > 我怎样才能让组件在反应中重新渲染

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

问题描述

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

这就是我在登录后希望它成为的样子： 登录后的标题这是我的布局代码：

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 问题，如果它杂乱无章且不清楚，对不起我的英语不好。

标签： javascriptreactjsreact-routerrendering

解决方案

Hazem，欢迎来到 Stack Overflow。

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

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;

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

推荐阅读