У меня есть следующая функция, как показано в Документах React-Router, за исключением того, что я использую prop
Я передаю компоненту, чтобы проверить, аутентифицирован ли пользователь или нет:
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={(props) => {
return (
props.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: '/login',
state: { from: props.location },
}}
/>
)
);
}
}
/>
);
};
Вот что отображается:
return (
<React.Fragment>
{ isLoading ? (<SplashScreenView />) : (
<Router>
<ContentContext.Provider value={appContent}>
<TitleBarRouter />
<Switch>
<Route exact path="/login" render={props => <LoginView {...props} performAuthentication={this.performAuthentication} isAuthenticating={isAuthenticating} isAuthenticated={isAuthenticated} />} />
<PrivateRoute exact path="/" render={props => <MainView {...props} checked={appContent.checked} elapsed={elapsed} />} />
<PrivateRoute exact path="/settings" component={SettingsView} />
<PrivateRoute exact path="/card" component={CardView} />
<PrivateRoute exact path="/memberships" component={ActiveMembershipsView} />
</Switch>
<TabBarRouter />
</ContentContext.Provider>
</Router>
)}
</React.Fragment>
);
И вот как я устанавливаю состояние.Эта функция передается в качестве опоры на маршрут /login
, где она вызывается нажатием кнопки.
performAuthentication(obj) {
this.setState({
isAuthenticating: true,
}, () => {
setTimeout(() => {
this.setState({
isAuthenticating: false,
isAuthenticated: true,
});
}, 2000);
});
}
Ошибка, которую я получаю, когда устанавливаю isAuthenticated
в true
и PrivateRoutes
Предполагается, что рендер Invariant Violation: Maximum update depth exceeded.
Мне удалось отследить его до функции PrivateRoute
, которая вызывает бесконечный цикл, который, в свою очередь, должен вызывать ошибку.Хотя я не могу понять, почему это происходит.Буду признателен за любые указатели.