在页面更改后保留反应数据以做出反应

Question

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

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

以及listView的setStates为true或false的切换区域，不是很必要，但以防万一：

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

Answer 1

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

React-Redux , alternative 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});

在页面更改后保留反应数据以做出反应

persist react data in react after page change

javascript

database

cookies

local-storage

reactjs