小编典典

在React中使用LocalStorage吗?

reactjs

从到目前为止的经验来看,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开关可能存在问题。


阅读 1226

收藏
2020-07-22

共1个答案

小编典典

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

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