如何在 okta 令牌每 2 分钟刷新一次后停止页面刷新

Question

import React from "react";
import { Route, Redirect, Switch } from "react-router-dom";
import { useOktaAuth } from "@okta/okta-react";
import { Superadmin } from "../../../../Application_Constants";
import { AuthPage } from "./AuthPage";
import { ErrorPage1 } from "../../errors/ErrorPage1";
import { makeStyles, useTheme } from "@material-ui/core/";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "../../redux/reducer";
import Header from "../../header/Header";

const AppWithRouterAccess = () => {
  const store = createStore(reducer, applyMiddleware(thunk));

  const theme = useTheme();
  const { authState, oktaAuth } = useOktaAuth();

  return (
    <Switch>
      {!authState.isAuthenticated ? (
        /*Render auth page when user at `/auth` and not authorized.*/

        <Route>
          <AuthPage />
        </Route>
      ) : (
        /*Otherwise redirect to root page (`/`)*/
        <Redirect from="/auth" to="/" />
      )}

      <Route path="/error" component={ErrorPage1} />

      {!authState.isAuthenticated ? (
        /*Redirect to `/auth` when user is not authorized*/
        <Redirect to="/auth/login" />
      ) : (
        <>
          {/* provider used to integrates redux store with react application */}
          {/* redux provides a centralized store to manage the state of application */}
          <Provider store={store}>
            <Header />
          </Provider>
        </>
      )}
    </Switch>
  );
};

export default AppWithRouterAccess;

上面是AppWithRouterAccess.js 文件。 authState.isAuthenticated 正在刷新，因为 okta 令牌刷新并且我的页面随着商店刷新而刷新。我怎样才能停止我的 redux 来刷新？ authState.isAuthenticated 刷新 redux[store] 后不应更新。

Answer 1

React 组件仅因以下两个原因之一进行渲染：

• 其父级渲染（从而渲染其所有子级）
• 组件中的状态变量通过其“设置状态函数”被赋予新值

现在，请注意钩子（即名为

useXXX()

的函数）并且具有状态变量，因此如果您的组件使用具有状态变量的钩子并且钩子中的状态变量更新，那么您的组件将重新渲染（因为 Hooks 中的资源被视为调用钩子的组件的一部分）。

那么，是否是

useOktaAuth()

组件的状态变量经常更新，从而导致上述组件重新渲染？