使用本地存储持久化状态不会在 React class 组件中保存视图类型的状态数据

Question

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

实施前：

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

这里是本地存储，当我在本地存储中切换时显示另一个值

Answer 1

Ibsn 完美诊断了您的问题。

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

|| 运算符 returns 如果它是“真实的”，则为第一个值，否则为秒数。

在您的情况下，第一个值可以有 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,
};

使用本地存储持久化状态不会在 React class 组件中保存视图类型的状态数据

Persisting the state using local storage is not saving the state data for view type in react class component

javascript

cookies

local-storage

reactjs

react-native