时间戳

首页 > 解决方案 > 如何使用 React 钩子在 localStorage 中存储初始切换状态

javascript - 如何使用 React 钩子在 localStorage 中存储初始切换状态

问题描述

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

我大部分时间都在工作，在第一页加载时，布尔值只是设置为 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'));

标签： javascriptreactjsreact-hooks

解决方案

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

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

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

推荐阅读