当通过本地存储设置时，React状态仍在变化
当通过本地存储设置时，React状态仍在变化
提问于 2019-03-05 12:57:06
基本上，我有两个按钮，两个按钮都将我的this.state.language更改为"en“或"es”。我已经创建了两个onClick方法，在更改它时，将其保存到本地存储中。但是，这样做之后，当我转到另一个页面时，状态会恢复到默认值。
constructor(){
super();
this.state = {
sideNav: '',
language: ''
}
this.langEn = this.langEn.bind(this);
this.langEs = this.langEs.bind(this);
}
langEn() {
this.setState({language: 'en'});
localStorage.setItem('language', JSON.stringify(this.state.language));
console.log(this.state);
}
langEs() {
this.setState({language: 'es'});
localStorage.setItem('language', JSON.stringify(this.state.language));
console.log(this.state);
}语言状态也被传递到我的路线中，作为一个支柱。
回答 6
Stack Overflow用户
回答已采纳
发布于 2019-03-05 13:02:50
如果之前已经设置了localStorage值，则需要使用getItem获取language值，并设置language：
constructor(){
super();
const language = storage.getItem("language") || '';
this.state = {
sideNav: '',
language
}
this.langEn = this.langEn.bind(this);
this.langEs = this.langEs.bind(this);
}
langEn() {
this.setState({language: 'en'});
localStorage.setItem('language', this.state.language);
console.log(this.state);
}
langEs() {
this.setState({language: 'es'});
localStorage.setItem('language', this.state.language);
console.log(this.state);
}而且您不需要JSON.stringify()，因为language已经是一个字符串
Stack Overflow用户
发布于 2019-03-05 13:00:28
状态是异步，您可以在状态值更新后调用一个函数，如下所示：
langEn() {
this.setState({language: 'en'}, () => localStorage.setItem('language', JSON.stringify(this.state.language)));
}这在setState的文档中得到了解释。
setState()不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。对setState的调用不能保证同步操作，为了提高性能，调用可以批处理。
您的控制台和本地存储无法设置。
Stack Overflow用户
发布于 2019-03-05 13:02:39
在构造函数中从localStorage加载保存的状态：
constructor(){
super();
this.state = {
sideNav: '',
language: localStorage.getItem('language') || ''
}
this.langEn = this.langEn.bind(this);
this.langEs = this.langEs.bind(this);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55003372
复制相关文章
相似问题
腾讯云开发者
