Сохранить выбранный язык в местном хранилище?

Question

У меня есть следующий код, все выглядит правильно, но я не могу сохранить язык в localstorage.

state = {
  lang: JSON.parse(localStorage.getItem("lang")) || en
};

selectLanguage = e => {
  const langKey = e.target.value;
  this.setState(
    { lang: languages[langKey] },
    localStorage.setItem("lang", JSON.stringify(this.state.lang))
  );
};

msg: console.log:

localStorage
  Storage {lang: "[object Object]", length: 1}
    lang: "[object Object]"
      length: 1
  __proto__: Storage

Я пыталсязагрузить сохраненный язык без JSON.parse, но опять та же проблема.

Заранее всем спасибо

Answer 1

Вы уверены, что это хорошая идея для строкового state свойства вашего компонента ReactJS?Вы также должны знать, что второй аргумент setState ожидает функцию (как это определено здесь https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react/src/ReactBaseClasses.js#L58), но вы отправляете undefined, который является результатом localStorage.setItem(...).

Необязательный обратный вызов setState будет выполнен, как только объект состояния будет действительно обновлен, что означает, что значение this.state.lang, вероятно, будет текущим, а не новым выбранным языком. В любом случае, вот моя рекомендация.

Во-первых, дважды проверьте, что значение languages соответствует ожидаемому, и сделайте следующее:

this.setState({
    lang: languages[langKey]
}, function() {
    /**
     * Safe to access state
     */
    localStorage.setItem('lang', JSON.stringify(this.state.lang));
});

Не волнуйтесь, поскольку функция обратного вызова сохраняет контекст текущего компонента, которыйозначает, что доступ к состоянию безопасен через this.

Вам также необходимо разобраться с ситуацией, когда JSON.parse не удастся, потому что в нем есть неверная информация, если вы не обработаете ее, произойдет сбой всего приложениядля правильной визуализации.

Я не уверен в ваших потребностях, но я также считаю, что ждать изменения состояния не нужно, вы можете просто сделать тhis:

const langObject = languages[langKey]
this.setState({
    lang: langObject
});
/**
 * Not necessary to wait until state is updated
 */
localStorage.setItem('lang', JSON.stringify(langObject));

Имейте в виду, что существует ограничение максимальной емкости localStorage, возможно, вы не захотите использовать его как можно чаще, чтобы не ограничивать этот предел.