Question

我有以下代码，看起来一切正确，但是我无法将语言保留在本地存储中。

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))
  );
};

console.log消息为

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

我尝试不使用JSON.parse加载保存的lang，但还是同样的问题。

谢谢大家

Answer 1

您确定对ReactJS组件的state属性进行字符串化是个好主意吗？您还应该知道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因为其中包含无效信息而失败的情况，如果不处理，整个应用程序将无法正确呈现。

我不确定您的需求，但我也认为不必等待状态更改，您只需执行以下操作：

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

请注意，localStorage的最大容量是有限制的，您可能不想尽可能多地使用它，以避免超出该限制。

将所选语言保存在本地存储中？

1 个答案: