在页面更改后将反应数据保留在反应中答案

【问题标题】：persist react data in react after page change在页面更改后将反应数据保留在反应中
【发布时间】：2021-04-18 13:08:40
【问题描述】：

我正在使用反应，每次离开页面后，状态都会恢复到原始状态。当用户单击按钮时，我设置了一个状态。这处理了 listView 的 setState，它是一个布尔值。因此，如果 listView 为 true，则视图将为 listView，反之亦然。问题是，如果我选择另一个视图并刷新页面，它会立即返回到 listView。现在我通过一些研究了解了如何使用钩子来保持状态，但我无法在与我的示例真正相似的类组件中找到执行此操作的示例。请看我的代码。谢谢！

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

还有将listView的setStates设置为true或false的toggle区，其实不是必须的，但以防万一：

 <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>

【问题讨论】：

另请参阅Lifting State Up 和React Context API，与react-redux 等成熟的应用程序管理系统相比，它们更容易进入且级别更低。

标签： javascript reactjs database cookies local-storage

【解决方案1】：

您可以通过不同的方法实现这一点：

React-Redux，替代Context API
Redux Persist Example

像这样从localStorage 添加和获取状态值：

 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))
      });
    }

每次响应更改后将 URL 作为查询参数推入：

history.push({pathname: 'path/', search: '?' + Qs.stringify(params)});

//fetch the params from URL
params = Qs.parse(nextProps.location.search.substring(1));

//add it to your local state of particular component
this.setState({selectedOption: params.selectedOption});

【讨论】：