React setState 不设置状态

Question

我正在做一个简单的反应应用程序，我有一个 App 组件，它跟踪状态然后呈现它。起初状态是一个空字符串。之后，当我访问 /signin 时，我单击一个将状态从“”更改为“Marc”的按钮，并通过道具将其传递给在其页面上呈现用户名称的 Profile 组件。问题是它不会改变状态，它总是“”。我尝试调试，状态始终为“”，但实际上调用了 setState 方法。所以我不知道为什么。谁能帮我？提前致谢，附上代码。

应用程序：

export default class App extends React.Component {

    constructor(props) {
        super(props);
            this.state = {
            session: ""
        };
        this.updateUser = this.updateUser.bind(this);
    }

    updateUser() {
        this.setState({
            session: "Marc"
        });
    }

render() {
    return(
        <BrowserRouter>
            <Switch>
                <Route path exact='/' component={Home}/>
                <Route path='/profile' render={(props) => (
                    <Profile session={this.state.session} /> 
                )}/>                                            
                <Route path='/signin' render={(props) => (
                    <SignIn onClick={this.updateUser} />
                )}/> 
            </Switch>    
        </BrowserRouter>
    );
}

}

登录：

export default class SignIn extends React.Component{

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}


responseGoogle (googleUser) {
    const mail = googleUser.profileObj.email;
    const familyName = googleUser.profileObj.familyName;
    const name = googleUser.profileObj.name;
    //this.changeName(mail);
    alert("Mail: " + mail + "\n" + "Nom i Cognoms: " + name + "\nSuccessfully Logged In");
}

handleClick() {
    this.props.onClick();
}

render () {
    return (
    <div>
        <GoogleLogin 
                    clientId="CLIENTID"
                    onSuccess={this.responseGoogle}
                    onFailure={this.responseGoogle}
                    buttonText="Google"/>
        <button onClick={this.handleClick}>Instant User</button>            
    </div>
    );
}

}

简介：

export default class Profile extends React.Component {

constructor(props) {
    super(props)
}


render() {
    return(
        <h1>I am {this.props.session} User</h1>
    );
}
}

Answer 1

在您的情况下，当您在 SignIn 组件时，单击按钮将正确更新状态，但是当您尝试通过在浏览器中手动输入 URL 来访问另一个页面说 Profile 时，您的状态更改将丢失并且当您的会话发生变化时，状态将重新初始化。

您应该尝试以编程方式导航，为此您可以参考 StackOverflow 上的以下答案：

Programatically Routing based on a condition with react-router

简而言之，您将拥有登录组件

class SignIn extends React.Component {
     ...
    handleClick() {
        this.props.onClick();
        this.props.history.push('/profile');
    }
    ...
export default withRouter(SignIn);

以上是我建议你做的，或者为了测试你可以有一个Link 组件并使用它导航

render() {
    return(
        <BrowserRouter>

            <div>
            <Link to="/profile">Profile</Link>
            <Switch>
                <Route path exact='/' component={Home}/>
                <Route path='/profile' render={(props) => (
                    <Profile session={this.state.session} /> 
                )}/>                                            
                <Route path='/signin' render={(props) => (
                    <SignIn onClick={this.updateUser} />
                )}/> 
            </Switch>  
            </div>  
        </BrowserRouter>
    );
}