不会加载带有上下文提供程序的 React 打字稿页面显示加载，但从未加载

问题描述

使用 AuthContextProvider 将 App 组件包装在 index.tsx 中后，我的应用无法加载。当我删除它时，页面会加载我的登录组件。我是新手，所以我可能在状态管理方面做错了。任何建议和提示将不胜感激。

App.tsx

import React from "react";
import SignIn from "./components/login/SignIn";

function App() {
  return <SignIn />;
}

export default App;

index.tsx

import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { AuthContextProvider } from "./context/auth-context";

ReactDOM.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>,document.getElementById("root")
);

登录.tsx

export default function SignIn() {
const classes = useStyles(); // declared,but cut it to save space
const [email,setEmail] = useState("");
const [password,setPassword] = useState("");
const [emailError,setEmailError] = useState(false);
const [passwordError,setPasswordError] = useState(false);
const authCtx = useContext(AuthContext);

const handleSubmit = (event: any) => {
  event.preventDefault();
  setEmailError(false);
  setPasswordError(false);

  if (email === "") {
    setEmailError(true);
  }

  if (password === "") {
    setPasswordError(true);
  }

  if (email && password) {
    const userInfo = Buffer.from(`${email}:${password}`,"utf8").toString(
      "base64"
    );

    axios
      .post(
        "https://auth-integration.bypassmobile.com/auth",{},{
          headers: {
            Authorization: `Basic ${userInfo}`,},}
      )
      .then((res: any) => {
        if (res.status === 200) {
          console.log(res.data); // Remove this line later
          authCtx.login(res.data);

          //Remove this line later
          authCtx.isLoggedIn
            ? alert("Welcome back!")
            : alert("Login Failed!");
        }
      })
      .catch((error: any) => {
        console.error(error);
        alert("Invalid credentials");
      });
  }
};

return (...)

auth-context.tsx

import React,{ useState } from "react";

const AuthContext = React.createContext({
  userData: {},isLoggedIn: false,login: (userData: {}) => {},logout: () => {},});

export const AuthContextProvider = (props: any) => {
  const [userData,setUserData] = useState({});

  const userIsLoggedIn = Object.keys(userData).length !== 0;

  const loginHandler = (userData: object) => {
    setUserData(userData);
  };

  const logoutHandler = () => {
    setUserData({});
  };

  const contextValue = {
    userData: userData,isLoggedin: userIsLoggedIn,login: loginHandler,logout: logoutHandler,};

  return (
    <AuthContextProvider value={contextValue}>
      {props.children}
    </AuthContextProvider>
  );
};

export default AuthContext;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）