Из того, что я испытываю до сих пор, это не похоже на обновления 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. Если localstorage включен, тогда визуализируйте представление кнопкой OFF.
Я хочу иметь возможность установить этот рендер на основе состояния localStorage. Я попытался сделать то же самое, используя базовые булевы, и работает так, как ожидалось. Однако при использовании localStorage что-то не работает.
Я не удивлюсь, если моя логика просто выключена.
EDIT: Чтобы объяснить, кнопка и вид не действуют так, как должны. Когда индикаторы выключены и в хранилище ничего нет, кнопка добавляет ON в localStorage, но не изменяет вид. Если я обновляю страницу, страница будет включена, и когда я нажму на нее, кнопка будет работать, выключив ее. Но он работает только один раз, что заставляет меня думать, что может быть проблема с переключателем OFF.