Почему я теряю свое состояние ReactJS?

Я новичок в ReactJS, но у меня есть простой пример: у меня есть форма входа в систему, которая устанавливает состояние пользователя (полное имя и т. Д.), А затем я использую React Router для браузераHistory.push ('/') вернуться на главную страницу. Я могу подтвердить, что если я останусь на странице входа в систему, что мои состояния действительно будут сохранены, однако, когда я вернусь на домашнюю страницу и в свой «родительский» компонент (App.js) и запустил это до метода рендеринга:Почему я теряю свое состояние ReactJS?

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

Он всегда возвращает значение true. Мой конструктор даже не делает ничего с государством. Если я положу журнал в конструктор в своем родительском компоненте App.js, я могу проверить, что на самом деле страница не перезагружается, что компонент монтируется только один раз (по крайней мере, конструктор в App.js вызывается только один раз в течение всего домашняя страница> login> жизненный цикл домашней страницы). Опять же, государство, похоже, удаляется после смены страниц.

Какая простая вещь мне не хватает?

Edit: некоторый код, пытаясь упростить:

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

источник

2016-05-30 chum of chance

Как обмениваться кодом, а не пытаться его описать? – naomik

В каком состоянии? Сколько компонентов мы говорим? Как вы его обновляете? (Поделитесь некоторым кодом!) – gravityplanx

Я добавил код, дайте мне знать, если это поможет, попытался получить его с соответствующими битами –

Где вы звоните handleSubmit(), какой компонент вызывает его? Если это <LoginForm> или <LoginBar> или что-то в этом духе, ваш this. означает, что компонент, не <App>.

Чтобы установить родительское состояние (<App> в вашем случае), вы должны передать ребенок свойство с функцией обработчика (например onLogin={this.handleAppLogin.bind(this)}), чтобы ваш ребенок должен назвать эту опору (this.props.onLogin(true)) и обработчик в <App> установит состояние приложения: handleAppLogin(isLoggedIn) { this.setState({isLoggedIn}); }

Но для «глобальных» значений состояния, таких как состояние входа в систему, токены доступа, имена пользователей и т. Д., Лучше использовать Redux или другую библиотеку Flux.

источник

2016-05-30 23:04:26

{props.children} Это отображает дочерние элементы. Я думаю, что глобальным элементам нужно что-то еще, чтобы справиться с этим, поскольку, насколько я понимаю, состояние не должно течь «вверх» к родительскому. –

Это был закрытый вопрос маршрутизатор проекта и обсуждается во многих SO статьях:

Однако настойчивый реальный мир нужно. Я предполагаю, что образ того, как справиться с этим, основан на Redux и/или хранилище браузера.

источник

2017-04-23 11:30:48

Почему я теряю свое состояние ReactJS?

ответ

Смежные вопросы