javascript - 将 LocalStorage 与 React 结合使用？

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 的状态为关闭或为空，则使用 ON 按钮渲染 View 。如果本地存储已打开，则使用“关闭”按钮渲染 View 。

我希望能够根据 localStorage 的状态设置此渲染。我尝试使用基本 bool 值做同样的事情，并且它按预期工作。然而，当使用 localStorage 时，有些东西似乎不起作用。

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

编辑:解释一下，按钮和 View 没有发挥应有的作用。当灯熄灭且 Storage 中没有任何内容时，该按钮会将 ON 添加到 localStorage，但不会更改 View 。如果我刷新页面，页面就会呈现为“打开”，当我单击它时，按钮会通过将其关闭来工作。但它只能工作一次，这让我相信关闭开关可能有问题。

Answer 1

.setItem() 本地存储函数返回 undefined。您需要执行本地存储更新，然后返回新的状态对象:

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