React上下文没有从默认值更新

Question

有一个登录表单，一旦登录完成，我尝试将上下文设置为一个特定的值

import { UserStatus, useUserStatus } from "../context/context";
const completeLoginAction = async (credentials: any) => {
var loginSuccess = await authService.login(credentials);
if (loginSuccess) {
setUserStatus(1);
localStorage.setItem("userStatus", JSON.stringify(userStatus));
console.log("USERSTATIS AFTER LOGIN IS" + userStatus);
console.log(
"local storage on login is " + localStorage.getItem("userStatus")
);
return true;
} else {
return false;
}
};

但是这始终是默认值0

即使硬编码为1，它也不会改变

my context.tsx 
import { createContext, useContext } from "react";
export enum UserStatus {
LoggedOff = 0,
LoggedIn = 1,
UserStatus,
}
export type UserStatusContextType = {
userStatus: UserStatus;
setUserStatus: (userStatus: UserStatus) => void;
};
export const UserStatusContext = createContext<UserStatusContextType>({
userStatus: UserStatus.LoggedOff,
setUserStatus: (userStatus) => console.warn("log on status unknown"),
});
export const useUserStatus = () => useContext(UserStatusContext);

不知道为什么它保留默认值而不设置新值

任何想法?

编辑:我完成的登录表单

mport React, { useContext, useEffect, useState } from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";
import "./LoginPage.css";
import authService from "../../services/authService";
import { Navigate, useNavigate } from "react-router-dom";
import { UserStatus, useUserStatus } from "../context/context";
const LoginPage = () => {
const [username, setUserName] = useState("");
const [password, setPassword] = useState("");
const [errMsg, setErrMsg] = useState("");
const [sucess, setSuccess] = useState("");
const { userStatus, setUserStatus } = useUserStatus();
const navigate = useNavigate();
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUserName(e.target.value);
};
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPassword(e.target.value);
};
const handleSave = async (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
const credentials = {
Username: username,
Password: password,
};
var completed = await completeLoginAction(credentials);
// if (completed) {
//   console.log("logged in");
//   navigate("/");
// } else {
//   showErrorMessage();
// }
};
const completeLoginAction = async (credentials: any) => {
var loginSuccess = await authService.login(credentials);
if (loginSuccess) {
setUserStatus(1);
localStorage.setItem("userStatus", JSON.stringify(userStatus));
console.log("USERSTATIS AFTER LOGIN IS" + userStatus);
console.log(
"local storage on login is " + localStorage.getItem("userStatus")
);
return true;
} else {
return false;
}
};
const showErrorMessage = () => {
let elms = document.getElementsByClassName(
"loginfailmessage"
) as HTMLCollectionOf<HTMLElement>;
for (var i = 0; i < elms.length; i++) {
elms[i].style.display = "block";
}
};
return (
<div className="container">
<div className="LoginForm">
<h1 className="Title">Login</h1>
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="Enter username"
onChange={handleUsernameChange}
name="username"
required
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={handlePasswordChange}
name="password"
required
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={handleSave}>
Submit
</Button>
</Form>
<h4 className="loginfailmessage" style={{ display: "none" }}>
Failed to login
</h4>
</div>
</div>
);
};
export default LoginPage;

Answer 1

MyContext.ts

import { createContext, useContext } from 'react';
export type Status = 'pending' | 'ready';
export type ContextValue = {
signedIn: boolean,
status: Status
};
export interface Returns {
value: ContextValue
updateValue: (newValue: ContextValue) => void
}
/** defines the default value if none provided */
export const initialValue: ContextValue = {
signedIn: false,
status: 'pending'
};
export const MyContext = createContext<ContextValue>({
value: initialValue,
updateValue: (newValue) => {
return console.warn('DefaultContextCallback', newValue);
}
});
export const useMyContext = () => useContext(MyContext);

App.tsx-或者需要提供的位置

import React, { useState } from 'react';
import { Component } from 'Component';
import { MyContext, initialValue ) from 'MyContext';
const App = () => {
const [value , updateValue] = useState(initialValue);
return (
<MyContext.Provider value={{ value, updateValue }} >
<App>
<Component/>
</App>
</MyContext.Provider>
)
}

Component.tsx

const Component = () => {
const { value, updateValue } = useMyContext();
}