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>
  );
}

portals.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));
    }
  }

JSON 解析错误：本地存储的意外标识符“未定义”

1 个答案: