JSON 解析錯誤：帶有 localStorage 的意外標識符“未定義”

Question

我一直在使用 useContext 將我的變量從一個頁面獲取到另一個頁面，並且我實現了 localStorage 所以我刷新了頁面。 但是，當我刷新portals頁面時，出現此錯誤： JSON Parse error: Unexpected identifier "undefined"

奇怪的是，如果我刷新它的子頁面editPortal ，我不會出錯！

有人能幫助我嗎？

_app.tsx：

import { PortalContext } from '../context/PortalContext';

function MyApp({ Component, pageProps }) {
  const [portal, setPortal] = useState<Portal>();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const portal = localStorage.getItem('portal');

    if (portal) {
      setPortal(JSON.parse(portal));
    }

    setLoading(false);
  }, []);

  function choosePortal(portal: Portal) {
    setPortal(portal);
    if (typeof window !== 'undefined') {
      localStorage.setItem('portal', JSON.stringify(portal));
    }
  }
  return (
    <PortalContext.Provider value={{ portal, escolhePortal, loading }}>
      <main>
        <Header />
        <Component {...pageProps} />
      </main>
    </PortalContext.Provider>
  );
}

門戶網站.tsx

export default function Portals() {
  const router = useRouter();
  const { choosePortal } = useContext(PortalContext);
  const baseName = Array.isArray(router.query.baseName)
    ? router.query.nomeBase[0]
    : router.query.nomeBase;

  const portal: Portal = GetPortals(baseName);
  choosePortal(portal);

  if (portal) {
    return <h1>portal.title</h1>
  }

非常感謝！

Answer 1

謝謝大家的思考和提問！

我相信我正在存儲一個未定義的portal ，它發生在完成之前。

我只是在設置 localStorage 之前添加了一個額外的驗證&& portal ：

  function choosePortal(portal: Portal) {
    setPortal(portal);
    if (typeof window !== 'undefined' && portal) {
      localStorage.setItem('portal', JSON.stringify(portal));
    }
  }