Question

我是ReactJS的新手，但我有一个简单的用例：我有一个登录表单，用于设置用户的状态（全名等）然后我使用React Router来浏览器History.push（'/' ）回到主页。我可以确认，如果我留在登录页面上，我的状态实际上已经保存，但是当我回到主页，并进入我的“父”组件（App.js）并在渲染方法之前运行它：

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

它总是返回true。我的构造函数甚至没有对状态做任何事情。如果我在我的App.js父组件上的构造函数中放入一个日志，我可以验证该页面实际上没有被重新加载，该组件只安装一次（至少App.js上的构造函数只在整个过程中被调用一次）主页＆gt;登录＆gt;主页生命周期）。再一次，改变页面后状态似乎被删除了。

我错过了什么简单的事情？

编辑：一些代码，试图简化它：

// 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文章中讨论过：

然而，它是持久的现实世界需要。我想如何处理这个模式是基于Redux和/或浏览器存储。

为什么我会失去ReactJS状态？

2 个答案: