时间戳

首页 > 解决方案 > 导航或刷新页面时如何在 UI 的反应类组件中保持状态

javascript - 导航或刷新页面时如何在 UI 的反应类组件中保持状态

问题描述

我试图保存存储在状态中的选择，即使在页面导航之后也保存它。我看到使用本地存储可以做到这一点，这对我来说是首选方式。但是，我在功能组件中看到了很多资源，但对于类组件却没有。所以我试了一下，但它甚至没有做任何事情，仍然没有保存选择。

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

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

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>

标签： javascriptjsonreactjsreact-nativelocal-storage

解决方案

您可以使用 componentDidMount()

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

如果这不起作用，您可以将您的代码添加到 codeSandbox，以便我可以了解确切的问题是什么

推荐阅读