使用本地存储保持状态不会在反应类组件中保存视图类型的状态数据答案

【问题标题】：Persisting the state using local storage is not saving the state data for view type in react class component使用本地存储保持状态不会在反应类组件中保存视图类型的状态数据
【发布时间】：2021-04-22 23:15:26
【问题描述】：

我正在尝试保存 listView 的状态，这是我的类组件中的布尔值。 listView 为 true 时的默认值。当它为真时，它将呈现一个 listView，如果为假，则不会。我试图研究这一点。我发现使用 react hooks 可以很容易地做到这一点，但是，使用类组件这样做的例子很少。我在类组件中看到的几个这样做的例子让我尝试了它并实现了与我的代码类似的东西。但是，在选择另一个视图并离开页面或刷新页面后，该状态不会持续存在。请看下面：

实施前：

constructor(props) {
    super(props);
    this.state = {
      listView: true,
    };
  }



<ToggleButtonGroup className={classes.toggleButtonContainer} exclusive orientation="horizontal">
       <ToggleButton className={listView ? classes.selectedToggleButton : '' } selected={listView} onClick={() => this.setState({ listView: true })} value="list" aria-label="list">
         <Icon fontSize="large" color="default">view_list</Icon>
                </ToggleButton>
                <ToggleButton className={!listView ? classes.selectedToggleButton : '' } selected={!listView} onClick={() => this.setState({ listView: false })} value="module" aria-label="module">
                  <Icon fontSize="large" color="default">view_module</Icon>
                </ToggleButton>
         </ToggleButtonGroup>

实施后：

constructor(props) {
   super(props);
   this.state = {
      listView: JSON.parse(localStorage.getItem('listView')) || []
    }
  }

 renderListView = (selection) => {
      ...

      this.setState({
        listView: selection
      },() => {
        localStorage.setItem('listView', JSON.stringify(this.state.listView))
      });
    }


 <ToggleButtonGroup className={classes.toggleButtonContainer} exclusive orientation="horizontal">
                <ToggleButton className={listView ? classes.selectedToggleButton : '' } selected={listView} onClick={() => this.renderListView(true)} value="list" aria-label="list">
                  <Icon fontSize="large" color="default">view_list</Icon>
                </ToggleButton>
                <ToggleButton className={!listView ? classes.selectedToggleButton : '' } selected={!listView} onClick={() => this.renderListView(false)} value="module" aria-label="module">
                  <Icon fontSize="large" color="default">view_module</Icon>
                </ToggleButton>
              </ToggleButtonGroup>

本地存储值正在切换，但页面刷新后状态仍然返回true

当我切换到本地存储时，本地存储显示另一个值

【问题讨论】：

欢迎来到 Stackoverflow！如果在按下按钮后设置了 localStorage 中的值，您可以检查开发工具吗？
谢谢，当然！让我检查一下
是的，当我切换视图时它会切换
我没有立即看到您的代码有任何问题。你能在构造函数的末尾添加一个console.log(this.state) 吗？也许这会让问题更清楚。
只是在这里猜测，但由于 listView 是一个布尔值，你为什么要像这样设置你的初始状态：listView: JSON.parse(localStorage.getItem('listView')) || []？如果您在 localStorage 中有 listView:false，这将导致每次刷新时将状态设置为空数组，然后评估为真

标签： javascript reactjs react-native cookies local-storage

【解决方案1】：

Ibsn 完美诊断您的问题。

JavaScript 在处理类型方面非常奇怪。每个值都被视为"truthy" 或"falsy"，具体取决于它们的计算结果是true 还是false。

|| 运算符返回第一个值，如果它是“真实的”，则返回秒，如果不是。

在您的情况下，第一个值可以有 3 个可能的值：null，如果您从未按下过按钮，true 或 false，如果您之前按下过。

通常|| 运算符可以完美区分例如对象和null，但这里null 和false 都是“假”的，因此false 值被替换为空数组[]，这是“真实的”。这会导致 localStorage 中的值被忽略。

有几种方法可以解决此问题。我推荐的是明确检查 localStorage 中的值是否为null。

const storageValue = JSON.parse(localStorage.getItem("listView"));
this.state = {
    listView: storageValue !== null ? storageValue : true,
};

【讨论】：