根据目前我的经验,似乎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>
);}
}
});
简单的应用程序。如果本地存储的状态关闭或为空,则使用“ON”按钮呈现视图。如果本地存储打开,则使用“OFF”按钮呈现视图。
我希望能够根据localStorage的状态设置此呈现方式。我尝试使用基本布尔值做同样的事情,结果如预期般工作。但是,当使用localStorage时,似乎有些问题。
如果我的逻辑有误,我不会感到意外。
编辑:解释一下,按钮和视图的行为不像应该的那样。当灯关闭并且存储中没有任何内容时,按钮会向localStorage添加ON,但不会更改视图。如果我刷新页面,页面呈现ON,当我点击它时,按钮可以正常工作,并将其关闭。但它只能工作一次,这让我认为OFF开关可能存在问题。