Reactjs 反应-登录后HeaderComponent没有更改？_Reactjs

Reactjs 反应-登录后HeaderComponent没有更改？

reactjs

Reactjs 反应-登录后HeaderComponent没有更改？,reactjs,Reactjs,我有一个TodoComponent，它是用来显示HeaderComponent中导航栏上的某些链接的，具体取决于用户的当前状态-无论是登录还是注销 class TodoApp extends Component { render = () => { return ( <div className="TodoApp"> <Router>

我有一个

TodoComponent

，它是用来显示HeaderComponent中导航栏上的某些链接的，具体取决于用户的当前状态-无论是登录还是注销

class TodoApp extends Component {
    render = () => {
        return (
            <div className="TodoApp">
                <Router>
                        <HeaderComponent />
                        <Switch>
                            <Route path="/" exact component={LoginComponent} />
                            <Route path="/login" exact component={LoginComponent} />
                            <AuthenticatedRoute path="/welcome/:name" exact component={WelcomeComponent} />
                            <AuthenticatedRoute path="/todos/" exact component={ListTodosComponent} />
                            <AuthenticatedRoute path="/logout" exact component={LogoutComponent} />
                            <Route component={ErrorFuncComponent} />
                        </Switch>
                        <FooterComponent />
                </Router>
            </div>
        )
    }
}

因为登录组件不强制？（我应该强制其他组件吗？我不确定这是正确的方法）

LoginComponent.jsx的片段
handleLoginButtonClick = () => {

    if (this.state.username === 'zaid' && this.state.password === 'khan') {
        AuthenticationService.registerAuthenticatedUser(this.state.username, this.state.password)
        // window.location.reload(false);
        this.props.history.push(`/welcome/${this.state.username}`) //String templating //this.props.history.push("/welcome/"+this.state.username)
        this.setState(
            { isLoginSuccess: true, isLoginFailed: false }, function () {
                console.log(this.state);
            }
        )
    }
    else {
        this.setState(
            { isLoginSuccess: false, isLoginFailed: true }, function () {
                console.log(this.state);
            }
        )
    }
    // console.log(this.state)
}

如何更新HeaderComponent（基本上在用户登录后再次调用render
方法？！）
另外，我认为可能还有另一种方法，即根据事件自动执行某些操作。我只是不知道这和我到目前为止所做的有什么关系。我是新来的
这家伙也面临同样的问题（但在我看来解释得很糟糕）：
您不应该将auth状态保留在外部类中。仅当状态或道具不同时（浅比较），才会触发反应更改检测。它无法检测外部类中的更改。例如，可以使用React上下文管理这种状态
const AuthContext=React.createContext（）
函数AuthProvider（道具）{
常量登录=（）=>{}
常量寄存器=（）=>{}
常量注销=（）=>{}
常量isLoggedIn=（）=>{}
返回(

{isUserLoggedIn&&主页}
{isUserLoggedIn&&li>待办事项}


{！isUserLoggedIn&登录}
{isUserLoggedIn&注销}

)
}
}
使用AuthContext导出默认值（HeaderComponent）

记住用AuthProvider
包装整个React树，您不应该将auth状态保留在外部类中。仅当状态或道具不同时（浅比较），才会触发反应更改检测。它无法检测外部类中的更改。例如，可以使用React上下文管理这种状态
const AuthContext=React.createContext（）
函数AuthProvider（道具）{
常量登录=（）=>{}
常量寄存器=（）=>{}
常量注销=（）=>{}
常量isLoggedIn=（）=>{}
返回(

{isUserLoggedIn&&主页}
{isUserLoggedIn&&li>待办事项}


{！isUserLoggedIn&登录}
{isUserLoggedIn&注销}

)
}
}
使用AuthContext导出默认值（HeaderComponent）

记住用AuthProvider
组件包装整个React树重新渲染如果它检测到状态或道具的任何变化，这就是浅层比较所做的，因此要重新渲染组件，它应该依赖于一个组件，如果它们，因此，您可以使用IsLoginSAccess将其传递回TodoComponent，然后将其作为道具发送到HeaderComponent，如下所示：
class TodoApp extends Component {
    state = {isLoginSuccess:false}
    render = () => {
        return (
            <div className="TodoApp">
                <Router>
                        <HeaderComponent isLoginSuccess={this.state.isLoginSuccess}/>
                        
                        <Switch>
                            <Route path="/" exact component={() => <LoginComponent isAuthed={true} onLogin={(status)=> this.setState({isLoginSuccess:status})}/>} />
                            ...
                </Router>
            </div>
        )
    }
}

在标题组件中将isUserLoggedIn替换为isloginsucess：
class HeaderComponent extends Component {

    render() {
    let { isLoginSuccess } = this.props;
        ...
        return (
            <header>
                <nav className="navbar navbar-expand-md navbar-dark bg-dark">
                    <div><a href="http://localhost:3000" className="navbar-brand">Todo Management</a></div>
                    <ul className="navbar-nav">
                        {isLoginSuccess && <li><Link className="nav-link" to="/welcome/in28minutes">Home</Link></li>}
                        ...
                </nav>
            </header>
        )
    }
}


class HeaderComponent扩展组件{
render（）{
设{isloginsucess}=this.props；
...
返回(

{ISLOGINSACCESS&&主页}
...
)
}
}

注意：使用Redux或Context而不是在组件之间传递道具将更具结构化，更易于处理
如果组件检测到状态或道具的任何变化，这就是浅层比较所做的，因此要重新呈现组件，应该依赖于一个，如果，因此，您可以使用IsLoginSAccess将其传递回TodoComponent，然后将其作为道具发送到HeaderComponent，如下所示：
class TodoApp extends Component {
    state = {isLoginSuccess:false}
    render = () => {
        return (
            <div className="TodoApp">
                <Router>
                        <HeaderComponent isLoginSuccess={this.state.isLoginSuccess}/>
                        
                        <Switch>
                            <Route path="/" exact component={() => <LoginComponent isAuthed={true} onLogin={(status)=> this.setState({isLoginSuccess:status})}/>} />
                            ...
                </Router>
            </div>
        )
    }
}

在标题组件中将isUserLoggedIn替换为isloginsucess：
class HeaderComponent extends Component {

    render() {
    let { isLoginSuccess } = this.props;
        ...
        return (
            <header>
                <nav className="navbar navbar-expand-md navbar-dark bg-dark">
                    <div><a href="http://localhost:3000" className="navbar-brand">Todo Management</a></div>
                    <ul className="navbar-nav">
                        {isLoginSuccess && <li><Link className="nav-link" to="/welcome/in28minutes">Home</Link></li>}
                        ...
                </nav>
            </header>
        )
    }
}


class HeaderComponent扩展组件{
render（）{
设{isloginsucess}=this.props；
...
返回(

{ISLOGINSACCESS&&主页}
...
)
}
}

注意：使用Redux或Context而不是在组件之间传递道具会更结构化，更易于处理
我刚刚尝试过。没有任何改变，我只是试过了。不会改变任何事，是的。问题是我在跟随一位讲师使用React和Spring Boot构建完整的网站。比如，我目前处于前端阶段，所以很多值只是硬编码的，我现在不介意这样的错误。然而，困扰我的是，他创建的前端能够在登录和注销后自动刷新，尽管代码实际上是相同的。（他可能正在使用旧版本的React）是的。问题是我在跟随一位讲师使用React和Spring Boot构建完整的网站。比如，我目前处于前端阶段，所以很多值只是硬编码的，我现在不介意这样的错误。然而，困扰我的是，他创建的前端能够在登录和注销后自动刷新，尽管代码实际上是相同的。（他可能正在使用旧版本的React）它抛出一个错误，表示TypeError:this.props.onLogin不是一个函数。请确保对this.setState（{isLoginsAccess:status}）进行此更改/
class HeaderComponent extends Component {

    render() {
    let { isLoginSuccess } = this.props;
        ...
        return (
            <header>
                <nav className="navbar navbar-expand-md navbar-dark bg-dark">
                    <div><a href="http://localhost:3000" className="navbar-brand">Todo Management</a></div>
                    <ul className="navbar-nav">
                        {isLoginSuccess && <li><Link className="nav-link" to="/welcome/in28minutes">Home</Link></li>}
                        ...
                </nav>
            </header>
        )
    }
}