Node.js 金色布局动态选项卡-单击即可更改数据

我已经用黄金布局创建了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;

从“React”导入React；
导入“/App.css”；
从“./组件/应用程序”导入应用程序；
const$=窗口。$；
常量应用=（）=>{
变量配置={
内容：[{
键入：“行”，
内容：[{
标题:"政党",，
类型：'react-component'，
组件：“应用程序”，
不公开：错误
}
]
}]
};
var myLayout=new window.GoldenLayout（配置，$（“#布局容器”）；
myLayout.registerComponent（‘应用程序’、应用程序）；
myLayout.init（）；
报税表（
);
}
导出默认应用程序；

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;

import React，{Component}来自'React'；
从“../common”导入数据
从“./titlesparcels”导入titlesparcels；
从“./Services”导入服务；
从“./Document”导入文档；
从“黄金版式”导入黄金版式；
让DataValue=[]；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户数据：“”
}
}
renderHeader（）{
返回(
应用程序Id
代理人
地位
partyType
洛吉达特
看法
)
}
renderData（）{
console.log（“登录”）
DataValue=data.applications；
返回DataValue.map（（val，key）=>{
返回(
{val.general.applicationId}
{val.general.agent}
{val.general.status}
{val.general.partyType}
{val.general.lodgedDate}
this.showTble（val.id）}>视图
)
});
}
showTble=（id）=>{
log（“用户：”，this.props，“appId”，id）
global.sendId=id；
这是我的国家({
userData:id
})
this.props.glEventHub._layoutManager.eventHub.emit（'params'，'stateChanged'）；
如果（此.props.glEventHub.\u布局管理器）{
让myLayout=this.props.glEventHub.\u layoutManager；
如果（myLayout.root.contentItems[0].contentItems.length-1>1）{
这个.forceUpdate（）文件
}否则{
变量titleparcels={
标题：“标题和包裹”，
类型：“反应组件”，
组件：“titlesparcels”，
不公开：错误，
道具：{“id”：id}
};
var服务={
标题：“服务”，
类型：“反应组件”，
组件：'服务'，
不公开：错误，
道具：{“id”：id}
};
试一试{
设窗=0；
myLayout.registerComponent（'titlesparcels'，titlesparcels）；
myLayout.registerComponent（'Services'，Services）；
myLayout.registerComponent（'文档'，文档）；
myLayout.root.contentItems[0].addChild（标题栏）；
myLayout.root.contentItems[0].addChild（服务）；
data.applications.map（（val，key）=>{
如果（val.id==id）{
val.documents.forEach（元素=>{
var文档={
标题：“文件”，
类型：“反应组件”，
组件：'文档'，
不公开：错误，
道具：{“doc”：element.source}
};
如果（窗口==0）{
控制台日志（“窗口”）
myLayout.root.contentItems[0].addChild（文档）；
window++；
}否则{
window++；
console.log（'data'））
myLayout.root.contentItems[0].contentItems[3].addChild（文档）；
}
});
}
});
}捕获（e）{
警报（e）
控制台日志（e）
}
}否则{
}
}
render（）{
如果（此.props.data）{
让value=this.pro
log（“来自userData的值”，value）
}
返回(
{this.renderHeader（）}
{this.renderData（）}
);
}
}
导出默认应用程序；