从到目前为止的经验来看，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开关可能存在问题。
在.setItem()本地存储功能的回报undefined。您需要执行本地存储更新，然后返回新的状态对象：
switchoff: function(){
localStorage.setItem('state', 'off');
this.setState({lights: 'off'});
},
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句