英文:
Local storage in react isn't keeping state on a refresh
问题
toggleDarkMode is called by a button onChange event.
但当我刷新或转到不同的URL时，状态会丢失。保持这个状态很重要，因为它是用于切换深色/浅色模式的。
我已经尝试过使用 window.localStorage 调用本地存储，并尝试将其放在 useEffect 中，以便它可以不断更新，但状态似乎仍然会丢失。我还尝试将其解析为JSON，许多教程都推荐这样做，但似乎也不起作用。
偶尔在新页面实例上，我会收到关于 bg 不能为未定义的错误，这让我认为状态没有被存储。
为什么状态会丢失，有没有更好/更高效的方法来实现这一点？
英文:
I'm trying to keep state on a refresh in my React application using this code:
const [darkMode, setDarkMode] = useState(localStorage.getItem('darkMode') || false);
const [mode, setMode] = useState({bg: 'light', variant: 'light'})
const toggleDarkMode = () => {
if (darkMode === true) {
setMode({bg: 'light', variant: 'light'})
setDarkMode(false);
localStorage.setItem("darkMode", false );
} else {
setMode({bg: 'dark', variant: 'dark'})
setDarkMode(true);
localStorage.setItem("darkMode", true );
}
};
toggleDarkMode is called by a button onChange event.
But when I refresh or go to a different URL the state is lost. It's important to keep this state as its for the dark / light mode.
I have tried calling local storage using window.localStorage and tried to place it in useEffect so it would update constantly but the state still seems to be lost. I've also tried parsing it as JSON which a lot of tutorials recommend but that also doesn't seem to work.
Occasionly on a new page instance I'll get the error about bg cannot be undefined, which makes me think the state isn't being stored.
Why is the state being lost and is there a better / more efficient way to do this?
答案1
得分: 0
本地存储只能存储字符串。通过将toggleDarkMode更新为检查字符串值x或y，我可以解决这个问题。
const [bool, setBool] = useState(localStorage.getItem('bool') || 'False')
const [mode, setMode] = useState((bool === 'False') ? {bg: 'light', variant: 'light'} : {bg: 'dark', variant: 'dark'})
const toggleDarkMode = () => {
if (bool === 'True') {
setMode({bg: 'light', variant: 'light'})
setBool('False')
localStorage.setItem("bool", 'False');
} else {
setMode({bg: 'dark', variant: 'dark'})
setBool('True')
localStorage.setItem("bool", 'True');
}
};
英文:
Local Storage can only store Strings. By updating toggleDarkMode to check against string values x or y I can solve the problem.
const [bool, setBool] = useState(localStorage.getItem('bool') || 'False')
const [mode, setMode] = useState((bool === 'False') ? {bg: 'light', variant: 'light'} : {bg: 'dark', variant: 'dark'})
const toggleDarkMode = () => {
if (bool === 'True') {
setMode({bg: 'light', variant: 'light'})
setBool('False')
localStorage.setItem("bool", 'False' );
} else {
setMode({bg: 'dark', variant: 'dark'})
setBool('True')
localStorage.setItem("bool", 'True' );
}
};
答案2
得分: -1
使用contextApi或redux更新暗模式值。它有两个好处：
- 无需本地状态setDarkMode
- 当更新暗模式时，它提供了一个更新后的值。
请使用**??代替||**运算符。
英文:
dark mode value upbate using contexApi or redux. Its have two benefits
- not need local state setDarkMode
- When the update dark mode it provides an updated value.
use this ?? instead of || optare.
``` const [darkMode, setDarkMode] = useState(localStorage.getItem('darkMode')?? false);
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论