Question

我正在尝试在要构建的应用程序中建立身份验证。只有特定的Microsoft Azure租约中的用户才能访问/不应访问此特定应用程序。因此，我决定只检查用户浏览器中的有效令牌（acquireTokenSilent），而不是创建登录页面及其所有功能，如果失败，请给他们一个弹出窗口以进行登录。但是，在身份验证正常工作后，我发现该应用程序正在不断重新呈现。

此后，我创建了一个codesandbox without the complications of MSAL and am getting the exact same behavior。

我是减速机的新手，但我认为除非状态更改，否则不会发生重新渲染。我找到了similar issue，但是它取决于useEffect的重现方式，目前我还没有使用。我在哪里误解事情的运作方式？

/auth.js

export default class Auth {
  constructor() {
    this.handleAuthentication = this.handleAuthentication.bind(this);
  }
  getProfile() {
    return {
      username: "FakeUser",
      name: "John Doe",
      email: "jd@fakeusers.net"
    };
  }

  handleAuthentication() {
    return new Promise(resolve => {
      console.log("handle Authentication function hit");
      //fake auth
      setTimeout(() => {
        console.log("timeout occurred, resolving.");
        resolve();
      }, 1000);
    });
  }
}

/AuthApp.js

import React, { useReducer, createContext } from "react";
import Auth from "./auth.js";

const auth = new Auth();
const UserContext = createContext();

const initialState = {
  auth: false,
  user: null
};

const reducer = (state, action) => {
  console.log("reducer hit!", action);
  switch (action.type) {
    case "loginUser":
      console.log(action.payload);
      return {
        ...state,
        isAuthenticated: action.payload.authenticated,
        userProfile: action.payload.user
      };
    default:
      console.log("Reducer hit without a payload!", action);
      return state;
  }
};

const UserContextProvider = props => {
  console.log("UserContextProvider Element rendering...");
  const [state, dispatch] = useReducer(reducer, initialState.user);
  auth.handleAuthentication().then(() => {
    dispatch({
      type: "loginUser",
      payload: {
        authenticated: true,
        user: auth.getProfile()
      }
    });
  });
  return (
    <UserContext.Provider
      value={{
        ...state
      }}
    >
      {props.children}
    </UserContext.Provider>
  );
};

const App = () => {
  return (
    <UserContextProvider>
      <UserContext.Consumer>
        {user =>
          user.isAuthenticated ? (
            <div>{JSON.stringify(user)}</div>
          ) : (
            <div>You are not logged in.</div>
          )
        }
      </UserContext.Consumer>
    </UserContextProvider>
  );
};

Answer 1

缺少的部分是这里需要useEffect或useMemo的事实。您需要检查是否需要进一步的身份验证，而不仅仅是像在构造函数中那样将其存在于函数中。

使用useReducer时出现意外的渲染循环（并且没有useEffect）

1 个答案: