时间戳

首页 > 解决方案 > 如何从本地存储中获取项目？

javascript - 如何从本地存储中获取项目？

问题描述

我尝试使用 next.js 从我的本地存储中获取项目，而不重新呈现我的页面。

我使用这段代码：

import { ThemeProvider } from "@material-ui/core";
import { FC, useEffect, useState } from "react";
import { useStore } from "../hooks/ContextStore";
import { darkTheme, theme } from "../theme/theme";

import Navbar from "./navbar/Navbar";

const Layout: FC = ({ children }) => {
  const [darkMode, setDarkMode] = useState(false);
  const store = useStore();

  useEffect(() => {
    setDarkMode(JSON.parse(window.localStorage.getItem("dark-mode")));
  }, [store.darkMode]);

  console.log("did render");

  return (
    <ThemeProvider theme={darkMode ? darkTheme : theme}>
      <Navbar />
      {children}
    </ThemeProvider>
  );
};

export default Layout;

因为我的 useEffect 更新了我的状态，所以当我打开或关闭暗模式状态时，它会渲染页面两次。

有没有办法防止它重新渲染那么多并访问本地存储？

标签： javascriptreactjstypescriptlocal-storagenext.js

解决方案

从外观上看，因为你的状态值总是来自本地存储，所以你不需要将它存储在状态中。你可以这样做：

const isClient = typeof window !== undefined;
const Layout: FC = ({ children }) => {
  const store = useStore();
  const darkMode = isClient && JSON.parse(window.localStorage.getItem("dark-mode"));

  return (
    <ThemeProvider theme={darkMode ? darkTheme : theme}>
      <Navbar />
      {children}
    </ThemeProvider>
  );
}
export default Layout;

如果您真的想存储在状态中，那么您应该更新 useEffect 中的依赖数组以在本地存储值中查找更新，而不是状态，因为您将更新状态。

const storageDarkMode = JSON.parse(window.localStorage.getItem("dark-mode"));
useEffect(() => {
  setState(storageDarkMode);
}, [storageDarkMode])

推荐阅读