javascript - not - react redux localstorage

¿Usando LocalStorage con React?

Question

Por lo que estoy experimentando hasta ahora, no parece que ReactJS se actualice con el estado de almacenamiento local. Mi código de abajo.

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>
);}
}
});

Aplicación sencilla. Si el estado de almacenamiento local está desactivado o vacío, renderice la vista con el botón ENCENDIDO. Si localstorage está activado, renderice la vista con el botón OFF.

Quiero poder configurar este render en función del estado de localStorage. He intentado hacer lo mismo usando booleanos básicos, y funciona como se esperaba. Sin embargo, cuando se usa localStorage, algo no parece funcionar.

No me sorprendería si mi lógica estuviera simplemente apagada.

EDITAR: Para explicar, el botón y la vista no actúan como deberían. Cuando las luces están apagadas y no hay nada en Almacenamiento, el botón se enciende en localStorage, pero no cambia la vista. Si actualizo la página, la página se activa, y cuando hago clic en ella, el botón funciona al desactivarla. Pero solo funciona una vez, lo que me lleva a creer que puede haber un problema con el interruptor de apagado.

Answer 1

Aquí es sólo otro ejemplo:

import React from ''react''
class App extends React.Component {
constructor(props) {
super(props);
var storedClicks = 0;
if (localStorage.getItem(''clicks'')) {
storedClicks = parseInt(localStorage.getItem(''clicks''));
}
this.state = {
clicks: storedClicks,
};
this.click = this.click.bind(this);
}
click() {
var newclick = this.state.clicks + 1;
this.setState({clicks: newclick});
// Set it
localStorage.setItem(''clicks'', newclick);
}
render() {
return (
<div>
<h2>Click the button a few times and refresh page</h2>
<button onClick={this.click}>Click me</button> Counter {this.state.clicks}
</div>
);
}
}
export default App;

Answer 2

La función de almacenamiento local .setItem() devuelve undefined . Debe realizar la actualización de almacenamiento local y luego devolver el nuevo objeto de estado:

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