如何解决不会加载带有上下文提供程序的 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 举报,一经查实,本站将立刻删除。