javascript - 如何在使用 react(redux) 渲染之前设置状态

Question

我想让一个组件在未登录时能够重定向。组件是用 react 制作的，检查 auth 功能与 redux 配合得很好。

//App.js
class App extends Component {
  checkUserInfo () => {
    const loggedInfo = storage.get('loggedInfo');
    if(!loggedInfo) return;
    const { UserActions } = this.props;
    UserActions.setLoggedInfo(loggedInfo)
  }

  constructor(props) {
    super(props);
    this.checkUserInfo();
  }

  render() {
    console.log(this.props.logged)
    return(...)
  }
}

export default connect((state) => ({logged: state.user.get('logged')}, (dispatch)=> ...)

和UserActions.setLoggedInfo Action 看起来像这样。

...
export default handleActions({
  [SET_LOGGED_INFO]: (state, action) => {
    return state.set('logged', true)
  }
})
...

所以，我想要在未登录身份验证时重定向组件的情况。我制作了一个渲染组件 <Route/>条件是 if state.logged==false , <Redirect to='login/> .

但在最前面的一点，在执行checkUserInfo之前记录的是假的功能。所以当我登录时，重定向到 /login , 当我没有登录时，重定向到 /login也是。

//PrivateRoute.js
...
  render() {
     const { logged } = this.props;
     console.log(logged);
     return(
      <Route path="/myPage" render={props =>
        logged ? <Component/> : <Redirect to={{pathname: '/login'}}/>
      }/>
    )
  }
...

这是截图 什么是logged控制台中的值。

我想在 myFunction( checkUserInfo ) 设置状态之前跳过最前面的状态，我该怎么做。

请帮助我。抱歉，英语语法不好。

Answer 1

您需要在渲染私有(private)组件之前检查您的全局状态。

Route 提供的

render prop 是一个很好的地方

<Route path='/secretarea' render={() =>{
    return props.isLoggedIn ? <SecretComp /> : <Login />
}}/>