当我导航或刷新页面时，如何在 UI 的 React class 组件中保持状态

Question

我正在尝试保存状态中存储的 selection，即使在页面导航之后也保存它。我看到这可以通过使用本地存储来实现，这对我来说是首选方式。但是，我看到很多资源可以在功能组件中执行此操作，但不适用于 class 组件。所以我试了一下，但它什么也没做，仍然没有保存 selection。

背景：，我有一个状态 listView 是对还是错。因此，如果 listView 为真，则视图将是 listView。如果我将其切换为 false，并刷新页面，listView 布尔值再次变为 true。当我导航到另一个页面时也是如此。

这是我的状态：（实施后）

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

这里是 select（实施后）的处理程序：

  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>

Answer 1

你可以使用 componentDidMount()

componentDidMount() {
 const listView = localStorage.getItem('listView')==='true';
  this.setState({listView});
}

如果这不起作用，您能否将您的代码添加到 codeSandbox 中，以便我了解确切的问题所在

Answer 2

主要问题是您的初始化：

JSON.parse(localStorage.getItem('listView')) || []

如果该值存储为 false 那么它被认为对 || 运算符是假的，因此使用第二个操作数 []。您可以使用 ?? instead of || 检查无效值（null 或 undefined）而不是虚假值（null、undefined、false , 0, "", NaN).

JSON.parse(localStorage.getItem('listView')) ?? []

如果 "listView" 尚未在本地存储中设置，则返回 null，并且 JSON.parse(null) 也将计算为 null。在这种情况下使用默认值。

// when loading from local storage
false || [] //=> []
false ?? [] //=> false

// if local storage is not set
null || [] //=> []
null ?? [] //=> []

当我导航或刷新页面时，如何在 UI 的 React class 组件中保持状态

How to persist state in react class component for UI when I navigate or refresh the page

javascript

json

local-storage

reactjs

react-native