在 Ionic React 中更改页面后，如何在不重置上下文的情况下更改上下文的值？

Question

我正在使用 useContext 来了解用户是否已登录，如果已登录则存储凭据。但是，当我更改组件时，对象似乎重置为默认值，使其无用。这个想法来自，但它不起作用。

UserContext.tsx

import { createContext } from "react";

interface UserManager {
  username: string;
  password: string;
  setIsLoggedIn: Function;
}

const user: UserManager = {
  username: "",
  password: "",
  setIsLoggedIn: () => {}
};

App.tsx

const App: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const user = useContext(UserContext);
  user.setIsLoggedIn = setIsLoggedIn;

  return (
    <UserContext.Provider value={user}>
      <IonApp>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route exact path="/login" component={Login}/>
            <Route exact path="/register" component={Register}/>
            <Route exact path="/user_info" component={UserInfo}/>
            <Route exact path="/main_tabs" component={MainTabs}/>
            <Redirect exact from="/" to={isLoggedIn ? "/main_tabs" : "/login"}/>
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
    </UserContext.Provider>
  );
};

Login.tsx

const Login: React.FC = () => {
  const user = useContext(UserContext);
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const login = () => {
    if (username !== "" && password !== "") {
      let body = {
        username: username,
        password: password
      };
      let request = sendRequest('POST', '/login', body);
      request.onreadystatechange = () => {
        if (request.readyState === 4) {
          let response = JSON.parse(request.response);
          if (response.success) {
            user.username = username;
            user.password = password;
            user.setIsLoggedIn(true);
            window.location.href = "/main_tabs"; // user will reset after this page change
          } else if (!response.success) {
            alert("Incorrect password");
          }
        }
      };
    } else {
      alert("Fill in both fields");
    }
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Concepimento</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonInput type="email" placeholder="Email" onIonChange={e => setUsername(e.detail.value!)} required clearInput></IonInput>
        <IonInput type="password" placeholder="Password" onIonChange={e => setPassword(e.detail.value!)} required clearInput></IonInput>
        <IonText onClick={() => window.location.href = "/main_tabs"}>Password dimenticata?</IonText>
        <br /><br /><br />
        <IonButton onClick={login}>
          Login
        </IonButton>
        <br /><br /><br />
        <IonText>
          Prima volta?
        </IonText>
        <br />
        <IonButton href="/register">
          Registrati Qui
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

我认为问题是当我导入 UserContext 以访问它的值时，用户对象被重新初始化（我放了一个打印语句来确认这一点）。我环顾四周，但所有来源都只谈论从子组件访问，从不修改默认值。我该怎么做？

Answer 1

window.location.href = "/main_tabs"

您不应在应用程序中使用 location.href...

history.push("/main_tabs");

在你的函数中

const history = useHistory();

在 Ionic React 中更改页面后，如何在不重置上下文的情况下更改上下文的值？

How can I change the value of a context without it resetting after a page change in Ionic React?

reactjs

ionic-framework

use-context