ReactJS: Как я могу обновить состояние свойства, используя localStorage?

Question

У меня есть компонент со следующим начальным состоянием:

  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 , должна быть строкой .

Рассмотрите возможность пересмотра кода, взаимодействующего с localStorage, чтобы значение состояния currentId сначала преобразовывалось в строку перед передачей в localStorage.setItem().

Также обратите внимание, что строковые значения возвращаются при 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
  }

Answer 2

Использовать componentDidMount. Смотрите код ниже. Я добавил проверку, имеет ли localStorage.currentId значение. Если это так, проверьте, соответствует ли значение из localStorage.currentId текущему идентификатору состояния, а если нет, то обновите состояние до значения из localStorage.

state = {
  currentId: 0,
  pause: true,
  count: 0,
  storiesDone: 0
}
componentDidMount() {
  //Assign localStorage.get("currentId") to a variable
  const localCurrentId = localStorage.get("currentId");
  //Check if localCurrentId is not null or undefined
  if (localCurrentId) {
    this.setState(prevState => ({
      //Update state's currentId if the current value didn't match with localCurrentId
      currentId: prevState.currentId !== localCurrentId ? localCurrentId : prevState.currentId
    }));
  }
}