在reactjs中使用use context useContext的问题

问题描述

我正在使用 useContext 在我的网站中创建授权，但状态值仅在登录或注册后重定向的页面上更改；我网站上的所有状态都没有改变。

这是我在每个页面上调用这个导航组件的代码，但状态是页面上唯一的变化，我在身份验证后被重定向

const Nav=({history})=>{
    const{state:{token,username,level},signout} =useContext(AuthContext);
    const popover = (
        <Popover>
            <Popover.Title >User Info</Popover.Title>
            <Popover.Content>
                <p>
                    Username:{username}
                </p>
                Level:{level}
            </Popover.Content>
        </Popover>
      );
    return <div className="container-fulid  bg-light animated bounceInLeft ">
        <div className="row" style={{margin:"0% 2%",display:"flex",justifyContent:"space-between",flexDirection:"row"}}>
            <div className="col-md-4 pr-0 logo" >
                <img src={logo}  alt="logo" />
            </div>
            <div className="col-md-5" style={{display:"flex",justifyContent:"flex-end",flexDirection:"column"}}>
                <div className="row">
                <div className="col-md home" onClick={()=>{history.push("/")}}>Home</div>
                <div className="col-md aboutus" onClick={()=>{history.push("/aboutus")}}>About Us</div>
                {
                    token?
                        <>
                        <div className="col-md login">
                            <OverlayTrigger trigger="focus" placement="bottom" overlay={popover} >
                                <button className="btn loginbtn btn-block rounded" >Profile</button>
                            </OverlayTrigger>
                        </div>
                        <div className="col-md login">
                                <button className="btn loginbtn btn-block rounded" onClick={()=>{signout(history)}} >
                                    logout
                                </button>
                        </div>
                        </>
                    :
                    <>
                        <Navbtn title="SignUp"  link="/signup" />
                        <Navbtn title="Login" link="/login" />
                    </>
                }
                </div>
            </div>
        </div>
        <hr />
    </div>
}

export default Nav;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）