Question

我有一个component，其初始状态如下：

  constructor(props) {
    super(props)
    this.state = {
      currentId: 0,
      pause: true,
      count: 0,
      storiesDone: 0
    }
    this.defaultInterval = 4000
    this.width = props.width || 360
    this.height = props.height || 640
  }

我必须从currentId = 0开始，然后即使在刷新页面后也要更新组件的状态。

我要在保留值currentId = 1之后恢复1。

当我尝试替换以上代码中的currentId = localStorage.getItem('currentId')时，出现属性无法更改的错误。

    var currentId = this.state.currentId;    
      localStorage.setItem( 'currentId', 1);
      console.log(currentId);
      localStorage.getItem('currentId');

我也尝试过：

  _this.setState((state) => {
      return {currentId: localStorage.getItem('currentId')};
    });

Answer 1

值类型坚持为localStorage must be a string。

请考虑修改与localStorage进行交互的代码，以便在将状态值currentId传递给localStorage.setItem()之前先将其转换为字符串。

还请注意，如果存在键，则string values are returned由localStorage.getItem()乘以currentId，这意味着您应解析返回的值以获得const saveCurrentId = () => { const { currentId } = this.state; /* Format string from value of currentId and persist */ localStorage.setItem( 'currentId', `${ currentId }`); } const loadCurrentId = (fallbackValue) => { /* Load currentId value from localStorage and parse to integer */ const currentId = Number.parseInt(localStorage.getItem('currentId')); /* Return currentId if valid, otherwise return fallback value */ return Number.isNaN(currentId) ? fallbackValue : currentId; }作为数字。

类似的事情应该起作用：

currentId

使用上面的代码，然后可以更新组件构造函数以自动加载和应用持久化的constructor(props) { super(props) this.state = { /* Use 0 as fallback if no persisted value present */ currentId: this.loadCurrentId( 0 ), pause: true, count: 0, storiesDone: 0 } this.defaultInterval = 4000 this.width = props.width || 360 this.height = props.height || 640 }，如下所示：

Object.keys(cntArr).length

Answer 2

使用componentDidMount。请参见下面的代码。我添加了检查localStorage.currentId是否具有值。如果有，请检查localStorage.currentId中的值是否与状态的currentId相匹配，如果不匹配，则将状态更新为localStorage中的值。

import myModule from './my-module'
myModule.a

ReactJS：如何使用localStorage更新属性状态？

2 个答案: