在 React 中使用異步等待進行 SessionStorage 調用

Question

我有一個具有以下代碼的功能組件。

import { isUserAuthCheck } from "../../Utils/SessionStorage";

function DefaultPage({ history }) {
  useEffect(() => void (isUserAuthCheck ? history.push("/home") : null));

在我的 Utils/SessionStorage 中，我有以下內容

export const isUserAuthCheck =
  sessionStorage.getItem("isUserAuthenticated") === "true";
export const getIsUserAuthenticated = sessionStorage.getItem(
  "isUserAuthenticated"
);
export const setValueInSession = (key, value) =>
  sessionStorage.setItem(key, value);

export const setIsUserAuthenticated = str =>
  sessionStorage.setItem("isUserAuthenticated", str);

這里的問題是， isUserAuthCheck似乎不會在sessionStorage每次發生變化時更新。 我如何確保每次sessionStorage發生更改時都會更新它。

任何幫助表示贊賞。

Answer 1

因為它不是一個函數。 每次調用它時它都不會觸發檢查。 您必須使其成為再次運行檢查的函數。

export const isUserAuthCheck = () =>
  sessionStorage.getItem("isUserAuthenticated") === "true";

或者您可以在每次為isUserAuthenticated設置值時更新它，但它是一個const因此您必須更改它。

編輯：

如果你想讓它成為我提到的getter ：

還要避免使用"true"或任何類型的這些東西。 bool類型可用是有原因的