react不根据状态更新localstorage值[重复]

Question

我正在使用react在我的网站中切换明暗模式。我还希望主题使用localstorage持久化。问题是，当单击switch切换主题时，相应的localstorage主题值不会更新。我知道状态更新是异步的，但我想解决这个问题。

我的代码：

const [darkMode , setDarkMode] = useState(false);

  //change theme 
  const toggleTheme = ()=>{ 

    setDarkMode(!darkMode);
    const root = window.document.documentElement;
    if(localStorage.getItem("isDark")=== null){
      localStorage.setItem("isDark",darkMode);
    }else{
      localStorage.setItem("isDark",darkMode);
    }
    root.classList.toggle('dark');

  }

我尝试使用async await，但结果是一样的。

Answer 1

您可以使用useEffect来监视darkmode。

这里，每次更新darkMode值时都会调用useEffect。因此，在内部设置localstorage值。我删除了，如果..else..条件，因为我想没有必要，如果您觉得可以保留它的话。

const [darkMode , setDarkMode] = useState(false);

useEffect(() => {
  localStorage.setItem("isDark", darkMode);
}, darkMode);
 
// change theme 
const toggleTheme = ()=>{ 
  setDarkMode(!darkMode);
  const root = window.document.documentElement;
  root.classList.toggle('dark');
}