Question

我正试图在两个标签之间传递App的状态，我没有使用Redux，只是纯粹的React。

我的方法是检查localStorage是否为空，如果没有，那么我得到该项目，然后我删除该项目。当我点击打开的窗口按钮时，我会在打开新窗口之前保存状态。我不知道我做错了什么，我的状态有一个数组，它似乎没有正确序列化/反序列化。这是代码

我的App类：

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

我尝试了很多不同的东西，但是我无法正确地序列化数组。

React在选项卡之间传递组件状态

0 个答案: