React setStateが状態を設定しない

Question

私は単純な反応アプリケーションを実行しています。私は状態を追跡してレンダリングするAppコンポーネントを持っています。最初は状態が空の文字列です。その後、/ signinにアクセスすると、状態を ""から "Marc"に変更するボタンをクリックし、そのページにユーザーの名前を表示するProfileコンポーネントにprops経由で渡します。問題は状態を変更しないことであり、常に ""です。デバッグしようとしましたが、状態は常に ""ですが、実際にsetStateメソッドが呼び出されます。だから私は理由を知らない。誰でも助けてくれますか？事前に感謝し、コードを囲みます。

APP：

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

} 

SIGNIN：

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

} 

PROFILE：あなたのケースでは

export default class Profile extends React.Component { 

constructor(props) { 
    super(props) 
} 


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

Answer 1

ときでボタンをクリックすると状態が正しく更新されますが、別のページ（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> 
    ); 
}