頁面重繪問題-有解無憂

我使用 react 構建了一個管理面板。每當用戶重繪頁面時登錄面板后，一切都消失了，我不知道為什么會這樣。它在沒有登錄頁面的情況下作業正常，但在添加登錄頁面后卻沒有。這是定義所有路由的 App.js 檔案代碼。

import React, { useState } from "react";
import { Route, Switch } from "react-router-dom";
import { Link } from "react-router-dom";
import * as FaIcons from "react-icons/fa";
import SideMenu from "./SideMenu";
import Dashboard from "./components/Dashboard";
import Registration_Request from "./components/Registration_Request";
import Users from "./components/Users";
import Seller from "./components/Request Pages/Seller";
import Reseller from "./components/Request Pages/Reseller";
import Sales from "./components/Request Pages/Sales";
import Sellers from "./components/Sellers";
import Character_Upload from "./components/Character_Upload";
import Campaign_Design from "./components/Campaign_Design";
import Levels_Design from "./components/Levels_Design";
import SellingCoins from "./components/SellingCoins";
import SignIn from "./SignIn";

function App() {
  let [signedIn, isSignedIn] = useState(false);
  return (
    <>
      <div className="header"></div>
      <div className="main-content">
        <Switch>
          <Route path="/" exact>
            <SignIn signedIn={signedIn} isSignedIn={isSignedIn} />
          </Route>
          {signedIn && (
            <>
              <SideMenu />
              <Route path="/dashboard" exact component={Dashboard} />

              <Route path="/registration-request/seller" component={Seller} />
              <Route
                path="/registration-request/reseller"
                component={Reseller}
              />
              <Route path="/registration-request/sales" component={Sales} />
              <Route path="/users" component={Users} />
              <Route path="/sellers" component={Sellers} />
              <Route path="/character-upload" component={Character_Upload} />
              <Route path="/campaign-design" component={Campaign_Design} />
              <Route path="/levels-design" component={Levels_Design} />
              <Route path="/sellingcoins" component={SellingCoins} />
            </>
          )}
        </Switch>
      </div>
    </>
  );
}

export default App;

uj5u.com熱心網友回復：

該signedIn狀態只能住在記憶體中，初始值是false。當您重新加載頁面時，您將重新加載應用程式，該應用程式會重新安裝/重新初始化組件。

解決方案通常是將您的應用程式狀態持久化到本地存盤，并從 localStorage 初始化。

使用狀態延遲初始化函式，您可以讀取保存狀態的 localStorage 并設定初始狀態。

const [signedIn, isSignedIn] = useState(() => {
  return !!JSON.parse(localStorage.getItem("signedIn"));
});

使用useEffect鉤子將狀態更改持久化到 localStorage。當用戶登錄并且signedIn狀態更新時，這將觸發useEffect鉤子的回呼并將狀態值保存到 localStorage 中。

useEffect(() => {
  localStorage.setItem("signedIn", JSON.stringify(signedIn));
}, [signedIn]);

uj5u.com熱心網友回復：

在頁面重繪時，signedIn 標志將設定為 false。不是在狀態變數中使用它，而是使用本地存盤/會話存盤。

您可以閱讀有關本地存盤的更多資訊

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/362816.html

標籤：javascript 反应反应路由器反应路由器-dom

上一篇：如何僅將async/await用于“for陳述句”

下一篇：控制臺日志承諾nodejs