Реакция прохождения состояния компонента между вкладками - PullRequest
Новая
       9

Реакция прохождения состояния компонента между вкладками

0 голосов
/ 06 июня 2018

Я пытаюсь передать состояние приложения между двумя вкладками, я не использую Redux, просто чистый React.

Мой подход состоит в том, чтобы проверить, пусто ли localStorage, если нет, то я получаюпредмет и сразу после него убираю предмет.Когда я нажимаю на кнопку моего открытого окна, я сохраняю состояние до открытия нового окна.Я не знаю, что я делаю неправильно, у моего состояния есть массив, и он, кажется, не сериализуется / десериализован должным образом.Вот код

Класс моего приложения: 

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { nombre: 'Escritorio', vtnAbiertas: [] };     
    this.handleStateChange = this.handleStateChange.bind(this)
  }

  componentDidMount() {
    //alert('Ventana renderizada')
    //window.localStorage.removeItem('AppState')
    if (localStorage.length > 0) {   
        const estadoAlmacenado = JSON.parse(localStorage.getItem('AppState'))
        this.setState({
          nombre: 'editor',
          vtnAbiertas: [
            ...estadoAlmacenado.vtnAbiertas
          ]
        })    
        localStorage.removeItem('AppState') 
      }
    else
      alert('LocalStorage no tiene valores almacenados')
  }

  handleStateChange = (param) => {
    this.setState({
      vtnAbiertas: [
        ...this.state.vtnAbiertas,
        param
      ]
    })
  }

  render() {   
    const themes = ['#2c2f33', 'teal']
    const backgroundColor = themes[0]       

    return (
      this.state.nombre === 'Escritorio' ?
      // /////////////// RENDERIZA EL ESCRITORIO
      <div className='App'>
        <Header backgroundColor = {backgroundColor} />

        <Landing 
          state = {this.state}
          ventanas = {this.state.vtnAbiertas}
          handleStateChange = {this.handleStateChange} 
          backgroundColor = {backgroundColor}                    
        />

        <Footer backgroundColor = {backgroundColor}/>
      </div>
      :
      // /////////////// RENDERIZA UN EDITOR
      <div className='App'>
        <Header backgroundColor = {backgroundColor} />
      </div>
    )
  }
}

И код обработчика, который открывает окно и сохраняет состояние: 

handleAbrirVentana = () => {     
        let nuevaVentana = window.open(window.self, '')
        this.props.handleStateChange(nuevaVentana)
        localStorage.setItem('AppState', JSON.stringify(this.props.state))        
    }

Я много пробовалразных вещей, но я не могу правильно сериализовать массив.

...