超过最大调用堆栈大小 [英] react Maximum call stack size exceeded

问题描述

如果用户未登录，我会尝试将用户重定向到TrapPage".

I trying to redirect the user to the "TrapPage" if he is not logged in.

这是我的代码:

function requireAuth(nextState, replace) {
    if (!auth.loggedIn()) {
        replace({ 
            pathname:'/trap'
        })
    }
}

export default (
    <Route path="/" component={App} onEnter={requireAuth}>
        <IndexRoute component={DashboardPage} />
        <Route path="trap">
            <IndexRoute component={TrapPage}/>
        </Route>
        <Route path="accounts">
            <IndexRoute component={AccountPage}/>
            <Route path="add" component={AccountAdd} />
            <Route path="detail/:id" component={AccountDetail} />
        </Route>
        <Route path="contacts">
            <Route path="detail/:id" component={ContactPage}/>
        </Route>
        <Route path="transmissors">
            <Route path="detail/:id" component={TransmissorPage}/>
        </Route>
        <Route path="attends" component={AttendancePage} />
        <Route path="reports" component={ReportPage} />
        <Route path="configs" component={ConfigurationPage} />
    </Route>
);

当我把函数requireAuth放在onEnter时，控制台给我一个错误:

When I put the function requireAuth at onEnter, the console gives me an error:

Uncaught RangeError: Maximum call stack size exceeded

我是 React 的初学者，请耐心等待 :)

I am a begginer at React, please be patient :)

我的代码有什么问题?

推荐答案

您需要在用户未登录时重定向到的同一路由上进行身份验证.这会导致重定向用户的无限循环，因为他未登录.也许将 从需要身份验证的路由下方移出.

You are requiring authentication on the same route that you redirect the user to if he is not logged in. That leads to an infinite loop of redirecting the user because he isn't logged in. Perhaps move out the <Route path="trap"> from underneath the routes that require authentication.

此外，您的函数还缺少第三个参数.

Also, you are missing a third parameter on your function.

function requireAuth(nextState, replace)

应该是

function requireAuth(nextState, replace, cb) {

一旦你完成了认证逻辑，你需要像这样调用cb:

and once you are done with the authentication logic, you need to call cb as such:

function requireAuth(nextState, replace) {
    if (!auth.loggedIn()) {
        replace({ 
            pathname:'/trap'
        });
    }

    cb();
}

这是一个回调函数，可以让路由流继续.

It's a callback function that will let the flow of the routing continue.

您可以这样重新组织您的路线:

You could re-organize your routes as such:

<Route path="/" component={App}>
    <IndexRoute component={DashboardPage} />
    <Route path="trap">
        <IndexRoute component={TrapPage}/>
    </Route>
    <Route onEnter={requireAuth}>
        <Route path="accounts">
            <IndexRoute component={AccountPage}/>
            <Route path="add" component={AccountAdd} />
            <Route path="detail/:id" component={AccountDetail} />
        </Route>
        <Route path="contacts">
            <Route path="detail/:id" component={ContactPage}/>
        </Route>
        <Route path="transmissors">
            <Route path="detail/:id" component={TransmissorPage}/>
        </Route>
        <Route path="attends" component={AttendancePage} />
        <Route path="reports" component={ReportPage} />
        <Route path="configs" component={ConfigurationPage} />
   </Route>
</Route>

然后根据您是否需要在仪表板上进行身份验证，您也可以将 onEnter={requireAuth} 添加到该路由.这会将需要身份验证的路由与不需要身份验证的路由区分开来.

And then depending on wether you need authentication on your dashboard or not, you could potentially add the onEnter={requireAuth} to that route as well. This will separate out the routes that need authentication from the ones that don't.

这篇关于超过最大调用堆栈大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！