React类组件中使用localStorage持久化listView状态失效问题求助

我一眼就看到问题啦！你在类组件的constructor里初始化listView状态时，默认值的写法出了关键问题：

// 错误写法
this.state = {
  listView: JSON.parse(localStorage.getItem('listView')) || []
}

这里的核心矛盾是：listView是布尔类型，当你切换到模块视图时，localStorage里存的是"false"，JSON.parse后得到布尔值false。但false || []会返回空数组[]——而在JavaScript里，空数组属于真值（Boolean([]) === true），所以组件会把listView判定为true，自然刷新后就回到列表视图了。

修正方案 #

把默认值从[]改成你预期的初始布尔值true即可，同时可以优化取值逻辑，避免localStorage无对应键时JSON.parse解析null的潜在问题：

constructor(props) {
  super(props);
  // 先从localStorage取值，解析失败或不存在则用默认值true
  const savedListView = localStorage.getItem('listView');
  this.state = {
    listView: savedListView ? JSON.parse(savedListView) : true
  };
}

另外，你的renderListView方法里，在setState的回调里可以直接用传入的selection存到localStorage，不用依赖this.state，逻辑更可靠：

renderListView = (selection) => {
  // ...你的其他业务逻辑
  this.setState({ listView: selection }, () => {
    localStorage.setItem('listView', JSON.stringify(selection));
  });
}

修正后的完整代码示例 #

constructor(props) {
  super(props);
  const savedListView = localStorage.getItem('listView');
  this.state = {
    listView: savedListView ? JSON.parse(savedListView) : true
  };
}

renderListView = (selection) => {
  // ...你的其他业务逻辑
  this.setState({ listView: selection }, () => {
    localStorage.setItem('listView', JSON.stringify(selection));
  });
}

<ToggleButtonGroup className={classes.toggleButtonContainer} exclusive orientation="horizontal">
  <ToggleButton 
    className={this.state.listView ? classes.selectedToggleButton : '' } 
    selected={this.state.listView} 
    onClick={() => this.renderListView(true)} 
    value="list" 
    aria-label="list"
  >
    <Icon fontSize="large" color="default">view_list</Icon>
  </ToggleButton>
  <ToggleButton 
    className={!this.state.listView ? classes.selectedToggleButton : '' } 
    selected={!this.state.listView} 
    onClick={() => this.renderListView(false)} 
    value="module" 
    aria-label="module"
  >
    <Icon fontSize="large" color="default">view_module</Icon>
  </ToggleButton>
</ToggleButtonGroup>

这样修改后，不管切换视图、页面跳转还是刷新，listView的状态都会正确从localStorage读取并持久化了。

内容的提问来源于stack exchange，提问作者kenny229