时间戳

首页 > 解决方案 > 如何在使用 react(redux) 渲染之前设置状态

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

问题描述

我想让一个组件在未登录时能够重定向。组件是用 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动作是这样的。


...
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，我该怎么做。

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

标签： javascriptreactjsredux

解决方案

像这样设置 PrivateRoute

这有助于以简单的方式检查身份验证。

推荐阅读