サーバーから取得したデータが ReactJS に表示されない

import React, { Component } from 'react';
    import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
    import classnames from 'classnames';
    let _ = require('lodash');

    import {Doughnut} from 'react-chartjs-2';

    import {bindActionCreators} from "redux";
    import {connect} from 'react-redux';

    import {fetchedBeacons} from '../../actions/';

    // const beacon = {
    //     _id: 'jslg',
    //     name: 'beacon 1',
    //     description: 'something goes here',
    //     status: 'ACTIVE',
    //     manufacturer: 'EDDY',
    //     floor: '1st floor',
    //     location: 'entrance'
    // };

    // const advanceBeacon = {
    //   uuid: '452-457-854-521-125',
    //     major: '7458-458-56',
    //     minor: '7458-665',
    //     beaconType: 'bluetooth'
    // };

    const ChartData = {
      labels: ['wednesday', 'yesterday', 'today'],
      datasets: [
        {
          label: 'My First dataset',
          borderColor: 'rgba(255,255,255,.55)',
          data: [ 856, 785, 785],
          backgroundColor: [
    		'#063e70',
    		'#107bb5',
    		'#666666'
    		]
        }
      ],
    };

    // TODO - come up with a decent name

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

    class InfoRows extends Component {
      render() {
        return (
           <tr>
                    <td>{this.props.beacon.major}:</td>
                    <td>{this.props.beacon.minor}</td>
                    <td>{this.props.beacon._id}</td>
                </tr>
        )
        
      }
    }
        
    class BeaconChartAnalysis extends Component {
        render() {
            return (
                <div className="col-lg-6">
                    <Doughnut data={ChartData}/>
                    <br/>

                </div>
            )
        }
    }

    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 rows = [];
            let a = this.props.bcn;
            
            Object.keys(a).map(function(keyName, keyIndex){
              let b = a[keyName];
              console.log(b);
              return rows.push(<InfoRow beacon={keyName} key={keyIndex}/>)
            })

            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>
                          {rows}
                        </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>

            )

        }


    }

    class BeaconDetailComponent extends Component {

      componentWillMount = () => {
            this.props.fetchedBeacons(this.props.location.query.id);
        };

      
      render() {
        
        return (
            <div className="container">
                <div className="row">
                  <div className="col-md-6 col-md-offset-3"><h1>Beacon Information {this.props.location.query.id}</h1></div>
                </div>
                <br/>
                <br/>
                    { this.props.bcn != null?
                <div className="row">
                    <BeaconDetails bcn={this.props.bcn}/>
                    <BeaconChartAnalysis />
                </div> :
                        <center><h1>...Loading</h1></center>

                }
            </div>
        )
      }
    }

    function mapStateToProps(state) {
        return {
            bcn: state.beacons
        }

    }


    function matchDispatchToProps(dispatch){
        return bindActionCreators({fetchedBeacons: fetchedBeacons}, dispatch);
    }

    export default connect(mapStateToProps, matchDispatchToProps)(BeaconDetailComponent);