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

问题描述 投票:0回答:1

我正在尝试在要构建的应用程序中建立身份验证。只有特定的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: "[email protected]"
    };
  }

  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>
  );
};
reactjs react-hooks
1个回答
0
投票
希望这可以帮助某人!
© www.soinside.com 2019 - 2024. All rights reserved.