我正在创建我的第一个react应用程序，我在亮暗模式上遇到了一些问题。当点击按钮切换LightDark函数时，它会将true或false状态保存到本地存储器中，并且工作正常。问题是当我刷新页面时，由于某种原因，当“chattiny_darkmode”为true时，图标总是回到太阳的原因，我无法弄清楚。提前感谢。
const LightDarkMode = () => {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
const data = localStorage.getItem("chattiny_darkmode");
if (data !== null) {
setDarkMode(localStorage.getItem("chattiny_darkmode"));
}
}, []);
const toggleLightDark = () => {
if (darkMode === true) {
setDarkMode(false);
localStorage.setItem("chattiny_darkmode", false);
} else {
setDarkMode(true);
localStorage.setItem("chattiny_darkmode", true);
}
};
return (
<div className="light-dark-mode">
<button onClick={toggleLightDark}>
<FaSun className={darkMode === true ? "hidden" : ""} />
<FaMoon className={darkMode === true ? "" : "hidden"} />
</button>
</div>
);
};例如，当页面刷新时，本地存储中的“chattiny_darkmode”键的值为true，但由于某种原因，符号是太阳而不是月亮。
2条答案
按热度按时间gmol16391#
localStorage只存储字符串值，当你使用setItem("chattiny_darkmode", true)时，true被字符串化，所以你实际上存储的是"true"，当你检索这个值时，它仍然是一个字符串，并且"true" !== true，所以你得到的是day模式。您可以使用例如
JSON.parse(..)或简单地与"true"进行比较来将值转换回来。顺便说一下，你可以考虑直接从
localStorage初始化darkMode，而不是用useEffect更新它，这在这里是可以的，因为getItem(..)是同步的。tjrkku2a2#
首先，我将对state和localstorage数据结构使用相同的类型。
现在，setItem的语法如下
**参数 *
所以，如果你用一个字符串替换你的false/true布尔值，那就可以了。
一些与问题无关的东西，我不认为在本地存储器中存储用户的暗/亮模式是最好的选择。如果用户使用其他设备访问您的网站，他们将需要重置暗/亮模式。