在React中使用async await进行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 发生更改时都得到更新。

感谢任何帮助。

- Sai Krishna Sanka

Answer 1

因为这不是一个函数。你每次调用它时，它不会自动执行检查。你需要将其变成一个函数，以便再次进行检查。

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

或者每次设置isUserAuthenticated的值时都可以更新它，但这是一个const所以你必须更改它。

编辑：

如果你想让它成为像我提到的getter：

此外，避免使用"true"或任何这样的东西。有一个bool类型可用的原因。

- sshanzel

---

谢谢，问题已解决。我相信后者是更好的方法。 - Sai Krishna Sanka

我会说第一个。您不希望它依赖于其他位置，因为该值可以被任何其他函数替换，如果它是一个函数，则永远不会发生。如果您希望它成为面向对象的方法getter，则可以在您的export default中声明一个getter，这样每次更改Session Value时也不必设置该值。 - sshanzel