金色版式动态标签-点击时更改数据

Question

我用Golden Layout创建了React.js项目。如您所见，您可以通过单击第一个“查看”按钮来打开其他三个子窗口，但是当我单击第二个查看按钮时，数据没有改变，因此无法找到我要去哪里。

第一视图

第二个视图

尝试将内容应用于其他三个选项卡时，出现上述错误。

App.js文件

import React from 'react';
import './App.css';
import Applications from './components/applications';
const $ = window.$;
const App=() =>{
  var config = {

    content: [{
        type: 'row',
        content: [{
          title: 'Parties',
          type:'react-component',
          component: 'Applications',
          isClosable:false            
        }

      ]
    }]
  };
  var myLayout = new window.GoldenLayout( config, $('#layoutContainer') );

  myLayout.registerComponent( 'Applications', Applications);

  myLayout.init();

  return (  
      <div></div>
  );
}

export default App;

Application.js

import React, { Component } from 'react';
import data from '../common'
import titlesparcels from './titlesparcels';
import Services from './Services';
import Document from './document';
import GoldenLayout from 'golden-layout';

let DataValue = [];
class Applications extends Component {

    constructor(props){
        super(props);
        this.state = {
            userData: ''
        }
    }

    renderHeader(){
        return(
            <div >
                <table style={{width: 100 + 'em'}} className="table table-striped">
                    <thead>
                        <tr>
                            <th>Application Id</th>
                            <th>agent</th>
                            <th>status</th>
                            <th>partyType</th>
                            <th>lodgedDate</th>
                            <th>View</th>
                        </tr> 
                    </thead>
                </table>
            </div>
        )
    }

    renderData(){
        console.log("in")
        DataValue = data.applications;

            return DataValue.map((val,key)=>{
            return(
                <div key={val.id}>                 
                    <table className="table table-striped">
                        <tbody>
                            <tr>
                                <td>{val.general.applicationId}</td>
                                <td>{val.general.agent}</td>
                                <td>{val.general.status}</td>
                                <td>{val.general.partyType}</td>
                                <td>{val.general.lodgedDate}</td>
                                <td><button onClick={()=> this.showTble(val.id)} >View</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                )
            });
    }


    showTble=(id)=> {
        console.log("User :",this.props,"appId",id)
        global.sendId = id;
        this.setState({
            userData: id
        })
        this.props.glEventHub._layoutManager.eventHub.emit('params','stateChanged' );
        if(this.props.glEventHub._layoutManager){
            let myLayout = this.props.glEventHub._layoutManager;

                if(myLayout.root.contentItems[0].contentItems.length-1 >1){


                    this.forceUpdate()
                }else{

                    var titleparcels = {
                        title: 'Titles & Parcels',
                        type: 'react-component',
                        component: 'titlesparcels',
                        isClosable:false,
                        props: {"id":id}
                      };
                      var services = {
                          title: 'Services',
                          type: 'react-component',
                          component: 'Services',
                          isClosable:false,
                          props: {"id":id}
                      };
                      try{
                        let window = 0;
                          myLayout.registerComponent( 'titlesparcels', titlesparcels);
                          myLayout.registerComponent( 'Services', Services);
                          myLayout.registerComponent( 'Document', Document);
                          myLayout.root.contentItems[0].addChild( titleparcels );
                          myLayout.root.contentItems[0].addChild( services );



                          data.applications.map((val,key)=>{
                            if(val.id === id){

                                val.documents.forEach(element => {
                                    var document = {
                                        title: 'Documents',
                                        type: 'react-component',
                                        component: 'Document',
                                        isClosable:false,
                                        props: {"doc":element.source}
                                    };
                                    if(window == 0){
                                        console.log("window")
                                        myLayout.root.contentItems[0].addChild( document );
                                        window++;
                                    }else{
                                        window++;
                                        console.log('data')
                                        myLayout.root.contentItems[0].contentItems[3].addChild( document );
                                    }

                                });
                            }
                        });

                      }catch(e){
                          alert (e)
                          console.log(e)
                      }

        }else{

        }

    }

    render() {

       if(this.props.data){
           let value =  this.pro
           console.log("value from userData",value)
       }
        return (
            <div>

               {this.renderHeader()}
               {this.renderData()}
                <titlesparcels userId={this.state.userData} />
            </div>
        );
    }
}

export default Applications;