如何使用 React 钩子将初始切换状态存储在本地存储中

Question

我正在尝试将切换的状态存储在本地存储中，作为在刷新时保留模态或类似内容的示例。

我在很大程度上已经工作了，在第一页加载时，布尔值仅设置为 null，这不会呈现<p>I'm toggled</p>标签，当您打开和关闭时，状态存储在本地存储中，我可以从开发工具中的"应用程序本地存储"选项卡中看到。

我遇到的问题是，在初始页面加载时，如果您再次刷新页面，默认情况下会显示<p>I'm toggled</p>标签以及之后的每次刷新。切换仍然有效，但默认情况下，任何刷新都会返回显示的状态——它不应该返回。

谁能帮助我理解为什么会发生这种情况？我已经尝试了几种变体，但似乎无法解决。

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
const [toggle, setToggle] = React.useState(localStorage.getItem('toggle'))
React.useEffect(() => {
localStorage.setItem('toggle', toggle)
}, [toggle]);
return (
<div>
<button onClick={() => {
setToggle(!toggle)
}}>
Toggle
</button>
{toggle ? <p>I'm toggled</p> : null}
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

这是因为本地存储将您的状态存储为字符串。因此，当您切换状态时，它会在保存到存储期间更改为"真"或"假"。因此，一旦刷新页面，您就会检查 ！toggle。现在，那时切换 === "假"，!"false"等于true.

解决方案之一是检查存储的值是否"true"：

const [toggle, setToggle] = React.useState(localStorage.getItem('toggle') === "true")