从服务器获取的数据未在ReactJS中显示

import React，{Component}来自'React'；
从“reactstrap”导入{TabContent，TabPane，Nav，NavItem，NavLink}；
从“类名称”导入类名称；
让uz=require（'lodash'）；
从'react-chartjs-2'导入{Doughnut}；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“../../actions/”导入{fetchedBeacons}；
//常数信标={
//_id:'jslg'，
//名称：“信标1”，
//描述：'这里有东西'，
//状态：“活动”，
//制造商：“EDDY”，
//楼层：“一楼”，
//地点：'入口'
// };
//持续进阶信标={
//uuid:'452-457-854-521-125'，
//少校：“7458-458-56”，
//小调：“7458-665”，
//beaconType:“蓝牙”
// };
常量图表数据={
标签：[“星期三”、“昨天”、“今天”]，
数据集：[
{
标签：“我的第一个数据集”，
边框颜色：“rgba（255255255，.55）”，
数据：[856785785]，
背景颜色：[
"063e70",，
"107bb5",，
'#666666'
]
}
],
};
//待办事项-想出一个像样的名字
类InfoRow扩展了组件{
render（）{
返回(
{this.props.beacon}
{this.props.beacon}
)
}
}
类InfoRows扩展组件{
render（）{
返回(
{this.props.beacon.major}：
{this.props.beacon.minor}
{this.props.beacon.\u id}
)
}
}
类分析扩展了组件{
render（）{
返回(


)
}
}
类扩展组件{
建造师（道具）{
超级（道具）；
this.toggle=this.toggle.bind（this）；
此.state={
activeTab:'1'
};
}
切换（选项卡）{
if（this.state.activeTab！==tab）{
这是我的国家({
活动选项卡：选项卡
});
}
}
render（）{
常量行=[]；
设a=this.props.bcn；
Object.keys（a.map）（函数（keyName，keyIndex）{
设b=a[keyName]；
控制台日志（b）；
返回行。push（）
})
常量行=[]；
//this.props.bcn.map（项=>{
//返回行。推送（）
// });
返回(
{this.toggle（'1'）；}
>
信标详细信息
{this.toggle（'2'）；}
>
高级细节
{rows}
.
{row}
)
}
}
类组件扩展组件{
组件将装入=（）=>{
this.props.fetchedBeacons（this.props.location.query.id）；
};
render（）{
返回(
信标信息{this.props.location.query.id}




{this.props.bcn！=null？
:
…装载
}
)
}
}
函数MapStateTops（状态）{
返回{
国家信标
}
}
功能匹配DispatchToprops（调度）{
返回bindActionCreators（{fetchedBeacons:fetchedBeacons}，dispatch）；
}
导出默认连接（MapStateTrops、matchDispatchToProps）（BeaconDetailComponent）在beaconDetails组件中，您需要将值与键一起传递给InfoRow组件，并执行null检查。另外，在
map
函数中不需要返回语句，因为您正在将对象推送到行数组中

 const rows = [];
        let a = this.props.bcn;
        // console.log(a);
        if(a != undefined) {
            Object.keys(a).map(function(value, keyIndex){
                 console.log(a[value]);
                 rows.push(<InfoRow beaconKey={value} beaconValue={a[value]} key={keyIndex}/>)
             })
        }

const行=[]；
设a=this.props.bcn；
//控制台日志（a）；
如果（a！=未定义）{
Object.keys（a）.map（函数（值、键索引）{
console.log（一个[值]）；
rows.push（）
})
}

在InfoRow组件中，可以显示这个值

class InfoRow extends Component {
    render() {
        return (
            <tr>
                <td>{this.props.beacon}</td>
                <td>{this.props.beaconValue}</td>
            </tr>
        )
    }
}

类InfoRow扩展组件{
render（）{
返回(
{this.props.beacon}
{this.props.beaconValue}
)
}
}

您还可以将beaconsDetail组件更改为

class BeaconDetails extends Component {


        constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
          activeTab: '1'
        };
      }

      toggle(tab) {
        if (this.state.activeTab !== tab) {
          this.setState({
            activeTab: tab
          });
        }
      }

        render() {



            const row = [];

            // this.props.bcn.map( item => {
            //     return row.push(<InfoRows beacon={item}/>)
            // });

            return (


                <div className="col-md-6 mb-2">
                <Nav tabs>
                  <NavItem>
                    <NavLink
                      className={classnames({ active: this.state.activeTab === '1' })}
                      onClick={() => { this.toggle('1'); }}
                    >
                      Beacon Details
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={classnames({ active: this.state.activeTab === '2' })}
                      onClick={() => { this.toggle('2'); }}
                    >
                      Advanced Details
                    </NavLink>
                  </NavItem>
                </Nav>
                <TabContent activeTab={this.state.activeTab}>
                  <TabPane tabId="1">

                    <div className="col-lg-6">

                      <table className="table table-clear">
                        <tbody>
                          {this.props.bcn && 
                            Object.keys(this.props.bcn).map(function(keyName, keyIndex){

                                return <InfoRow beacon={keyName} beaconValue={a[keyName]}key={keyIndex}/>
                             })}
                        </tbody>
                      </table>
                     </div>
    .
                  </TabPane>

                  <TabPane tabId="2">

                    <div className="col-lg-6">
                      <table className="table table-clear">
                        <tbody>
                          {row}
                        </tbody>
                      </table>
                     </div>

                  </TabPane>

                </TabContent>
              </div>

            )

        }


    }

类信标扩展组件{
建造师（道具）{
超级（道具）；
this.toggle=this.toggle.bind（this）；
此.state={
activeTab:'1'
};
}
切换（选项卡）{
if（this.state.activeTab！==tab）{
这是我的国家({
活动选项卡：选项卡
});
}
}
render（）{
常量行=[]；
//this.props.bcn.map（项=>{
//返回行。推送（）
// });
返回(