在反应应用程序中使用本地/会话存储设置初始状态答案

【问题标题】：Set initial state using local/session storage in react application在反应应用程序中使用本地/会话存储设置初始状态
【发布时间】：2018-04-20 15:37:18
【问题描述】：

我想使用本地/会话存储来启动我的状态。这种方法有效吗？我试过了，但它给了我一个错误。如果没有，那么我如何才能将存储中的值直接检索到我的状态？

constructor(props) {
super(props);
      sessionStorage.setItem('testkey','test value')
      this.state = {
            abc: sessionStorage.getItem('testkey')
       }
}

错误总是未定义的。

另外，如果我使用相反的方式，下面的代码可以正常工作

constructor(props) {
super(props);
      this.state = {
          abc: this.getItems(val)
      }
     this.getItems = this.getItems.bind(this);
}

getItems(value){
   let selectedItem =  value;
   return selectedItem;
}

但是当我这样做时，它没有。我只是无法从会话存储中获取价值。

   constructor(props) {
    super(props);
          this.state = {
              abc: this.getItems(val)
          }
         this.getItems = this.getItems.bind(this);
    }



 getItems(val){
       let setItem = sessionStorage.setItem('testkey', val);
       let getItem = sessionStorage.getItem('testkey');
       return getItem;
    }

当我将 getItem 记录到控制台时，它给了我一个对象。可能是什么问题？

【问题讨论】：

错误是什么？
去掉abc: sessionStorage.getItem('testkey');之后的分号
在您的示例中，您可以将 abc 状态设置为测试值。将其写入存储没有任何好处。但是说，你从其他地方获取值，然后你可以在函数中设置它并进入你的构造函数。那么你的方法是有效的。
你遇到了什么错误？哪一行导致了错误？
我已经更新了问题，请检查并抱歉延迟。

标签： reactjs state session-storage

【解决方案1】：

我仍然不太清楚你的意思，但你肯定必须使用 this.setState()。

此函数接受 json {'key':'value'} 一旦设置它更新状态。您实际上不必在状态中存储函数。

我不知道这是否是你使用 getter 和 setter 的地方。使用 setState 设置变量值，然后使用 this.state.[variable_name] 检索它们。

希望这会有所帮助。

class Session extends Component {
  constructor(props){
    super(props);
    this.setValue = this.setValue.bind(this);
    this.state = {};
  }

  setValue(key, value){
    let data = {};
    data[key] = value;
    this.setState(data);
  }

  render() {
    let session = this.state.session;
    return (
      <div >
        <div>{ session }</div>
        <input onClick={ ()=> this.setValue('session','Hello') } type="button" value="Click Me" />
      </div>
    );
  }
}

export default Session;

编码愉快。

【讨论】：