Question

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

应用

    let loginVC = storyboard?.instantiateViewController(withIdentifier: "LoginViewController") as! LoginViewController
    if self.emailTextField.text == "" {
        loginVC.userName?.text = "Hello"
    } else {
        loginVC.userName?.text = self.emailTextField.text!
    }
    navigationController?.pushViewController(loginVC, animated: true)

登入：

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>
    );
}

}

Answer 1

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

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

Programatically Routing based on a condition with react-router

简而言之，在SignIn组件中，您将拥有

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>
    );
}

React setState不设置状态

1 个答案: