在React中使用LocalStorage吗？

  • Z时代
  • 2024-01-10
  • 分类：问答

从到目前为止的经验来看，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'}); 
},

以上是 在React中使用LocalStorage吗？ 的全部内容， 来源链接： utcz.com/qa/432652.html

回到顶部