React setState沒有設置狀態

Question

我正在做一個簡單的反應應用程序，我有一個App組件，它跟蹤狀態並呈現它。起初狀態它是一個空字符串。之後，當我訪問/ signin時，我點擊一個按鈕，將狀態從「」更改爲「Marc」，並通過道具將其傳遞給在其頁面上呈現用戶名的Profile組件。問題是它不會改變狀態，它總是「」。我試圖調試，狀態總是「」，但實際調用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> 
    ); 
} 

} 

簽到：

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組件，onClicking按鈕將正確更新狀態，但當您試圖通過在瀏覽器中手動輸入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> 
    ); 
}