javascript - 通过本地存储设置时， react 状态仍在变化

Question

基本上我有两个按钮，都将我的 this.state.language 更改为“en”或“es”。我创建了 2 个 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);
  }

语言状态也作为 Prop 传递到我的路由中

Answer 1

状态是异步，您可以在状态值更新后调用函数，尝试如下:

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

这在 setState 的文档中进行了解释。

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.

您的控制台和本地存储无法设置。