blocks|key|2412339|text|状态是异步，您可以在状态值更新后调用一个函数，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2412340|+++langEn()+{
++++this.setState({language:+'en'},+()+=>+localStorage.setItem('language',+JSON.stringify(this.state.language)));
++}|code-block|syntax|javascript|2412341|这在setState的文档中得到了解释。|2412342|setState()不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。对setState的调用不能保证同步操作，为了提高性能，调用可以批处理。|blockquote|2412343|您的控制台和本地存储无法设置。|2412344|entityMap^0|3|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|Y|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|Z|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|S|$]]

state is async, you can call a function after the state value has updated, try like below:

<pre><code> langEn() {
 this.setState({language: 'en'}, () =&gt; localStorage.setItem('language', JSON.stringify(this.state.language)));
 }
</code></pre>

This is explained in documentation of setState.

<blockquote>
 setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
</blockquote>

your console and localstorage can't set.

blocks|key|1224531|text|在构造函数中从localStorage加载保存的状态：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224532|constructor(){
++++super();
++++this.state+=+{
++++++sideNav:+'',
++++++language:+localStorage.getItem('language')+%7C%7C+''
++++}
++++this.langEn+=+this.langEn.bind(this);
++++this.langEs+=+this.langEs.bind(this);
++}|code-block|syntax|javascript|1224533|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Load the saved state from localStorage in your constructor:

<pre><code>constructor(){
 super();
 this.state = {
 sideNav: '',
 language: localStorage.getItem('language') || ''
 }
 this.langEn = this.langEn.bind(this);
 this.langEs = this.langEs.bind(this);
 }

</code></pre>

blocks|key|200287|text|如果之前已经设置了localStorage值，则需要使用getItem获取language值，并设置language：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|200288|constructor(){
++++super();
++++const+language+=+storage.getItem("language")+%7C%7C+'';
++++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);
++}|code-block|syntax|javascript|200289|而且您不需要JSON.stringify()，因为language已经是一个字符串|200290|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem^0|9|C|S|7|11|8|1E|8|S|7|0|0|0|6|G|P|8|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You need to get the <code>localStorage</code> value using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem" rel="nofollow noreferrer"><code>getItem</code></a> and set the <code>language</code> if it's already been set previously: 

<pre><code>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);
 }
</code></pre>

And you don't need to <code>JSON.stringify()</code> since <code>language</code> is already a string

blocks|key|200297|text|您不能从存储中恢复状态。你应该恢复它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|200298|...
componentWillMount()+{
+this.setState({language:+localStorage.getItem('language')+%7C%7C+'en'});
}
...|code-block|syntax|javascript|200299|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You doesnt restore state from storage. You should restore it:

<pre><code>...
componentWillMount() {
 this.setState({language: localStorage.getItem('language') || 'en'});
}
...
</code></pre>

blocks|key|200301|text|唯一需要做的事情是，从本地存储读取默认值。另外，setState是异步方法，它有一个回调，因此您必须在其中将数据设置为localStorage。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|200302|constructor(){
++++super();
++++this.state+=+{
++++++sideNav:+'',
++++++language:+localStorage.getItem('language')
++++}
++++this.langEn+=+this.langEn.bind(this);
++++this.langEs+=+this.langEs.bind(this);
++}|code-block|syntax|javascript|200303|entityMap^0|O|8|1N|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

The only things which you need to do is, read the value from local storage for default value. Also <code>setState</code> is async method and it has a callback, so you have to set data to <code>localStorage</code> in there.

<pre><code>constructor(){
 super();
 this.state = {
 sideNav: '',
 language: localStorage.getItem('language')
 }
 this.langEn = this.langEn.bind(this);
 this.langEs = this.langEs.bind(this);
 }
</code></pre>

blocks|key|2412448|text|下面的代码将为您服务。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2412449|constructor(){
++++super();
++++this.state+=+{
++++++sideNav:+'',
++++++language:+localStorage.getItem("language")
++++}
++++this.langEn+=+this.langEn.bind(this);
++++this.langEs+=+this.langEs.bind(this);
++}

++componentDidMount()+{
++++console.log(localStorage.getItem("language"));
++}

++langEn()+{
++++this.setState({language:+'en'},+()+=>+{
++++++localStorage.setItem('language',+JSON.stringify(this.state.language));
++++++console.log(localStorage.getItem("language"));
++++});
++}

++langEs()+{
++++this.setState({language:+'es'},+()+=>+{
++++++localStorage.setItem('language',+JSON.stringify(this.state.language));
++++++console.log(localStorage.getItem("language"));
++++});
++}|code-block|syntax|javascript|2412450|下面是一个工作示例https://codepen.io/skalekarr/pen/QoGWeo|offset|length|2412451|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/skalekarr/pen/QoGWeo^0|0|0|9|13|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Below code will for you. 

<pre><code>constructor(){
 super();
 this.state = {
 sideNav: '',
 language: localStorage.getItem("language")
 }
 this.langEn = this.langEn.bind(this);
 this.langEs = this.langEs.bind(this);
 }

 componentDidMount() {
 console.log(localStorage.getItem("language"));
 }

 langEn() {
 this.setState({language: 'en'}, () =&gt; {
 localStorage.setItem('language', JSON.stringify(this.state.language));
 console.log(localStorage.getItem("language"));
 });
 }

 langEs() {
 this.setState({language: 'es'}, () =&gt; {
 localStorage.setItem('language', JSON.stringify(this.state.language));
 console.log(localStorage.getItem("language"));
 });
 }
</code></pre>

Here is a working example
<a href="https://codepen.io/skalekarr/pen/QoGWeo" rel="nofollow noreferrer">https://codepen.io/skalekarr/pen/QoGWeo</a>

Basically I have two buttons, both change my <code>this.state.language</code> to either "en" or "es". I have created 2 onClick methods to when changing it, save it to localstorage. However after doing this, when I go to a different page, the state reverts back to the default value. 

<pre><code>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);
 }
</code></pre>

The language state is also being passed into my Routes as a prop

React state still changing when set via localstorage

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

基本上，我有两个按钮，两个按钮都将我的this.state.language更改为"en“或"es”。我已经创建了两个onClick方法，在更改它时，将其保存到本地存储中。但是，这样做之后，当我转到另一个页面时，状态会恢复到默认值。constructor(){    super();    this.state = {...

问当通过本地存储设置时，React状态仍在变化
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当通过本地存储设置时，React状态仍在变化EN