具有本地存储的状态不适用于保存主题

Question

我正在尝试添加主题切换器在我的网站上使用localStorage，状态和效果的暗/光模式的反应。它就是不起作用，我找不到错误的逻辑(从我的观点来看)，我不知道该怎么做，这是senario：

这是我的逻辑：

  useEffect(() => {
    if (localStorage.getItem('theme') === null) {
      localStorage.setItem('theme', 'lightmode');
      setTheme('lightmode');
    }
    else if (localStorage.getItem('theme') === 'lightmode') {
      setTheme('lightmode')
    }
    else if (localStorage.getItem('theme') === 'darkmode') {
      setTheme('darkmode')
    }
  }, [])

  function change_theme() {
    if (theme === 'lightmode') {
      setTheme('lightmode')
      localStorage.setItem('theme', 'lightmode');
      document.body.classList.remove("darkmode");
      document.body.classList.add("lightmode");
    } else {
      setTheme('darkmode')
      localStorage.setItem('theme', 'darkmode');
      document.body.classList.remove("lightmode");
      document.body.classList.add("darkmode");
    };
  }

下面是我的JSX：

{
 theme === 'lightmode' ?
   <button onClick={() => change_theme()}>Change Mode</button>
    :
   <button onClick={() => change_theme()}>Change Mode</button>
}

Answer 1

在change_theme()函数中，您设置的主题与已经设置的主题相同。

解决方案：

  function change_theme() {
    if (theme === 'darkmode') { // <--- this was the mistake
      setTheme('lightmode')
      localStorage.setItem('theme', 'lightmode');
      document.body.classList.remove("darkmode");
      document.body.classList.add("lightmode");
    } else {
      setTheme('darkmode')
      localStorage.setItem('theme', 'darkmode');
      document.body.classList.remove("lightmode");
      document.body.classList.add("darkmode");
    };
  }

你只需要一个按钮。不需要terniery语句，因为change_theme()函数已经检查了主题。

<button onClick={change_theme}>Change Mode</button>