在React中使用LocalStorage吗？

Question

从到目前为止的经验来看，ReactJS似乎并没有使用localStorage进行更新。我的代码如下。

var Frr = React.createClass({
getInitialState: function(){
return { lights: localStorage.getItem('state')}
},

switchoff: function(){
this.setState({lights: localStorage.setItem('state', 'off')}); 
},

switchon:function(){
this.setState({lights: localStorage.setItem('state', 'on')}); 
},

render:function(){
if (this.state.lights === 'on'){ return (
<div>
<p>The lights are ON</p>
<input type="submit" value="Switch" onClick={this.switchoff}/>
</div>
);}

if ( (this.state.lights === 'off')|| (!this.state.lights) ){ return (
<div>
<p>The lights are OFF</p>
<input type="submit" value="Switch" onClick={this.switchon}/>
</div>
);}


}
});

简单的应用程序。如果本地存储状态为关闭或为空，则使用“打开”按钮渲染视图。如果启用了本地存储，则使用“关闭”按钮渲染视图。

我希望能够根据localStorage的状态设置此渲染。我已经尝试过使用基本的布尔值做同样的事情，并且它按预期工作。但是，在使用localStorage时，似乎无法正常工作。

如果我的逻辑完全不对，我不会感到惊讶。

编辑：解释一下，按钮和视图不按其应有的作用。当指示灯熄灭且“存储”中没有任何内容时，该按钮会将ON添加到localStorage，但不会更改视图。如果刷新页面，页面将显示为“打开”，当我单击该按钮时，该按钮将通过将其关闭而起作用。但是它只能运行一次，这使我相信OFF开关可能存在问题。

Answer 1

在.setItem()本地存储功能的回报undefined。您需要执行本地存储更新，然后返回新的状态对象：

switchoff: function(){
    localStorage.setItem('state', 'off');
    this.setState({lights: 'off'}); 
},