Question

基本上我有两个按钮，都将我的this.state.language更改为“ en”或“ es”。我创建了2个onClick方法，以便在更改它时将其保存到localstorage。但是，这样做之后，当我转到另一个页面时，状态会恢复为默认值。

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

语言状态也作为道具传递给我的路线

Answer 1

状态为异步，您可以在状态值更新后调用函数，如下所示：

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

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

setState（）不会立即使this.state突变，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState调用的同步操作，并且可能会批量调用以提高性能。

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

Answer 2

在构造函数中从localStorage加载保存的状态：

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

Answer 3

您需要使用getItem获取localStorage的值，并设置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已经是一个字符串

Answer 4

您不从存储还原状态。您应该将其还原：

...
componentWillMount() {
 this.setState({language: localStorage.getItem('language') || 'en'});
}
...

Answer 5

您唯一需要做的就是从本地存储中读取默认值。另外，setState是 async 方法，它具有回调，因此您必须在其中将数据设置为localStorage。

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

Answer 6

以下代码将为您服务。

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

这是一个可行的例子 https://codepen.io/skalekarr/pen/QoGWeo

通过本地存储设置时，反应状态仍在变化

6 个答案: