ReferenceError：sessionStorage 未定义

Question

我在 React 应用程序中遇到了 sessionStorage 的问题。我正在使用“use client”编译指示来确保某些代码仅在客户端运行，但我仍然收到 ReferenceError。

这是我的代码：

"use client";

import { useEffect, useState } from "react";
import { ProgressBar } from "staysure-component-library";
import Footer from "../components/organisms/footer/Footer";
import HomePage from "../components/pages/Home/HomePage";
import Styles from "./homePage.module.css";

function Page() {
  const [test, setTest] = useState(false);
  let hideFooter = sessionStorage.getItem("footer") === "true";

  useEffect(() => {
    if (!hideFooter) {
      sessionStorage.setItem("footer", "true");
    }
  }, []);

  return (
    <div className="bg-surface-neutral-option-2">
      <header>
        <ProgressBar value={10} />
      </header>
      <div>
        <HomePage />
        {hideFooter ? null : (
          <footer>
            <Footer />
          </footer>
        )}
      </div>
    </div>
  );
}

export default Page;

Answer 1

错误来自这里：

let hideFooter = sessionStorage.getItem("footer") === "true";

客户端组件首先在服务器上预渲染，以尽快向用户显示非交互页面 html。在服务器上预渲染期间，未定义

sessionStorage

。