Question

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

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

以及将listView的setState设置为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 , 替代 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});

页面更改后在反应中持久反应数据

1 个答案: