Reactjs LocalStore未存储正确的数据

import { useEffect, useState } from "react";
import "./styles.css";

const ThemeSwitch = () => {
  const [theme, setTheme] = useState("light");
  function changeTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }
  useEffect(() => {
    localStorage.setItem("Theme", theme);
  }, [theme]);
  return (
    <div className={theme === "light" ? "dark" : "light"} id="container">
      <h1>Hello World!</h1>
      <button
        className={theme === "light" ? "light" : "dark"}
        onClick={changeTheme}
      >
        Change Theme
      </button>
    </div>
  );
};
export default ThemeSwitch;

import { useEffect, useState } from "react";
import "./styles.css";

const ThemeSwitch = () => {
  const [theme, setTheme] = useState("light");

  function changeTheme() {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    localStorage.setItem("Theme", newTheme);
  }

  useEffect(() => {
    //here you must get the theme from localStorage on component mount
    const storedTheme = localStorage.getItem("Theme");
    if (storedTheme) {
      setTheme(storedTheme);
    }
  }, []); // make sure to leave this Empty dependency array to run only once on mount

  return (
    // ... rest of your code
  );
};

export default ThemeSwitch;

Reactjs相关问答推荐

过滤对象数组并通过迭代对象数组将属性放入新数组

在Redux工具包查询中，是否可以将标记应用到API切片内的所有端点？

react -在选项中 Select 我想要显示和图像.但当我 Select 该选项时，我希望控件仅显示该选项的文本部分

为多租户SSO登录配置Azure AD应用程序

Reaction Ploly：如何在多个子情节中共享zoom 状态

在Map()完成React.js中的多个垃圾API请求后执行函数

如何使ionic 面包屑在州政府条件下可点击？

状态更改时的rtk查询触发器

Chart.js如何go 除边框

如何使用 App Router 和服务器组件在 Next.js 13 中实现分页

React - 函数组件 - 点击两次问题处理

如何在 JS 中绘制具有不同笔画宽度的样条线

React：如何使用条件渲染和react 挂钩来更新另一个组件的状态？

运行 npm run build 出现问题

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

单击按钮或文本从一个组件移动到另一个组件

React - 仅在变量为真时显示项目

如何将 id 从页面传递到另一个页面？

链接的音译 Gatsby JS

仅react material 表前端分页