Использование LocalStorage с React?

Из того, что я испытываю до сих пор, это не похоже на обновления 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.

Ответ 1

Локальная функция хранения .setItem() возвращает undefined. Вам необходимо выполнить обновление локального хранилища, а затем вернуть новый объект состояния:

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

Ответ 2

Вот еще один пример:

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;