Пользовательский компонент "PrivateRoute", возвращающий маршрут React-Router ||Перенаправление вызывает нарушение инварианта - PullRequest
0 голосов
/ 12 февраля 2019

У меня есть следующая функция, как показано в Документах 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, которая вызывает бесконечный цикл, который, в свою очередь, должен вызывать ошибку.Хотя я не могу понять, почему это происходит.Буду признателен за любые указатели.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...