爲什麼我會失去我的ReactJS狀態？

Question

我是新來的ReactJS，但我有一個簡單的用例：我有一個登錄表單，設置用戶的狀態（全名等），然後使用React路由器browserHistory.push（'/'）回到主頁。我可以確認，如果我留在我的狀態實際得到保存的登錄頁面上，但是當我回到主頁並進入我的「父」組件（App.js）並在呈現方法之前運行此操作時：

console.log(this.state) // this returns null

它總是返回true。我的構造函數甚至沒有對狀態做任何事情。如果我在App.js父組件的構造函數中放入一個日誌，我可以驗證該頁面是否實際上沒有被重新加載，組件是否只安裝一次（至少App.js上的構造函數在整個過程中只調用一次主頁>登錄>主頁生命週期）。再一次，該國似乎在更改頁面後被刪除。

我錯過了什麼簡單的東西？

編輯：一些代碼，試圖簡化它：

// LoginForm.js 
//Relevant method 
    handleSubmit() { 
    this.login(this.state.username, this.state.password, (success) => { 
     if (!success) 
     { 
     this.setState({ isLoggedIn: false }) 
     this.setState({ loginError: true }) 
     return 
     } 

     this.setState({ isLoggedIn: true }) 

     browserHistory.push('/') // I can verify it gets here and if at this point I console.log(this.isLoggedIn) I return true 
    }) 
    } 

    // App.js 
    class App extends React.Component { 

     constructor(props) { 
     super(props); 
     console.log('hello') 
     } 

     render() { 
     const { props } = this 
     console.log(this.state) // returns null 
    return (
    <div> 
     <AppBar style={{backgroundColor: '#455a64'}} 
       title="ADA Aware" 
       showMenuIconButton={false}> 
     <LoginBar/> 
     </AppBar> 
     <div> 
     {props.children} 
     </div> 
    </div> 
)} 
    //Part of my routes.js 
    export default (
     <Route path="/" component={App}> 
     <IndexRoute component={HomePage}/> 
     <Route path="/login" component={LoginForm}/> 
     <Route path="*" component={NotFoundPage}/> 
     </Route> 
    ); 

Answer 1

當你打電話handleSubmit()，什麼組件調用呢？ 如果是<LoginForm>或<LoginBar>或類似的東西，您的this.表示該組件，非<App>。

要設置父的狀態（<App>你的情況），你應該傳遞給孩子一個屬性有一個處理函數（例如onLogin={this.handleAppLogin.bind(this)}），所以你的孩子必須把這個道具（this.props.onLogin(true)）和處理器在<App>將設置應用程序的狀態： handleAppLogin(isLoggedIn) { this.setState({isLoggedIn}); }

但是對於「全局」狀態值，例如登錄狀態，訪問令牌，用戶名等，您最好使用Redux或其他Flux庫。

Answer 2

這是一個封閉的問題，路由器的項目，在很多SO文章中討論：

• https://github.com/ReactTraining/react-router/issues/1094
• https://github.com/reactjs/react-router-redux/issues/358
• Redux router - how to replay state after refresh?

然而，持續的現實世界的需要。我想如何處理這個模式是基於Redux和/或瀏覽器存儲。