useContext使用后页面持续加载空白，无编译错误问题排查

你的应用卡死是因为LoginContext.js里的LoginProvider组件出现了无限递归调用。组件内部return时，你用了<LoginProvider>包裹children，但这个组件本身就叫LoginProvider，这会导致它不断渲染自己，形成无限循环，最终浏览器资源耗尽，页面空白且无法响应。

修改LoginContext.js中的return部分，把<LoginProvider>替换为<LoginContext.Provider>——createContext创建的上下文对象自带Provider组件，这才是正确的上下文提供者：

import React, { createContext, useState } from "react";
import jwt_decode from 'jwt-decode';

const LoginContext = createContext();

export function LoginProvider({children}) {
    
    const [user, setUser] = useState({})

    function handleCallbackResponse(response){
        var userData = jwt_decode(response.credential);
        setUser(userData);
        document.getElementById('signInDiv').hidden = true;
    }

    function handleSignOut(event) {
        setUser({})
        document.getElementById('signInDiv').hidden = false;
    }  

    // 替换为LoginContext.Provider
    return(
        <LoginContext.Provider value={{user, handleCallbackResponse, handleSignOut}}>
            {children}
        </LoginContext.Provider>
    );
}

export default LoginContext

• 避免直接操作DOM：document.getElementById('signInDiv')不符合React范式，建议用useRef获取DOM元素，比如：

  // 在组件内定义ref
  const signInDivRef = useRef(null);
  // 绑定到元素上
  <div ref={signInDivRef}></div>
  // 操作时使用
  signInDivRef.current.hidden = true;
  

• 统一空值判断逻辑：Login组件里Object.keys(user).length !== 0已经能判断用户是否登录，可和{user && ...}的判断统一，避免逻辑冗余。

内容的提问来源于stack exchange，提问作者mateo ghidini