react无法理解的死循环问题

项目是一个类似后台管理系统的东西,现在主要分两部分,登录页以及系统里的各种页面
逻辑大概这样:
1、首先进入全局路由配置页,判断本地有没有token,如果没有就重定向到登录页面,如果有token就直接进入系统.
2、如果没有token,就进入登录页面点击登录,派发一个action请求登录接口,成功之后再派发一个action将token存到store,然后再存一份到本地。然后在登录页面判断store里有没有token,如果没有就显示登录表单,如果有就进入系统主页
问题描述:打开系统时进入到了登录页,然后点击登录,就提示死循环。登录接口请求成功了,路由地址也变成了/home。我也没有setState

一、全局路由配置文件
export default class GlobalRouter extends Component {

render() {
    const [ loginRoute, ...otherRoutes ] = RadarMonitorRoutes;
    let token = localStorage.getItem('token')
    return (
        <BrowserRouter>
            <App>
                <Switch>
                    <Route key={loginRoute.path} path={loginRoute.path} component={loginRoute.component} />
                    <Route path='/' render={() => 
                        token ? <DynamicContent>
                                    {
                                        otherRoutes.map( item => <Route key={item.path} path={item.path} component={item.component} />)
                                    }
                                </DynamicContent>:
                                <Redirect to='/login' />
                        
                    }>  
                    </Route>
                </Switch>
            </App>
        </BrowserRouter>
    )
}

}
二、登录页
class LoginPage extends Component {

handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        //const { remember, ...params } = values;
        const { onLogin } = this.props;
        onLogin(params)
      }
    });
};
render() {
    const { token } = this.props;
    return (
        (token && <Redirect to='/home' />) || 
        <div className='login-container'>
            <LoginHeader />
            <LoginForm handleSubmit={this.handleSubmit} {...this.props} />
        </div>
    )
}

}
三、action文件
const setLoginDataAction = token => ({

type: actionTypes.SET_LOGIN_DATA,
token

})
// 登录获取token信息
export const fetchloginDataAction = (params) => (

 dispatch => {
    httpUtil.POST('login',params).then( res => {
        const { status, data } = res
        if(status === 200 && data) {
            dispatch(setLoginDataAction(data));// 提示这里不能setState
            storageUtil.setItem('token',data)// 这里没有执行
        }
    }).catch(err => {
        console.log(err)
    })
}

)
四、报错信息:
image.png

阅读 3.7k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题