數據獲取從服務器中，無法在ReactJS

Question

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: [ 
 
    \t \t '#063e70', 
 
    \t \t '#107bb5', 
 
    \t \t '#666666' 
 
    \t \t ] 
 
     } 
 
     ], 
 
    }; 
 

 
    // 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);

我已經提供的代碼片段 什麼，我想是爲了顯示從服務器 獲取細節我也是在所提供的屏幕截圖diplayed控制檯數據正在顯示，但在屏幕上不是 圖像您可以看到正在從服務器獲取的對象及其在控制檯中顯示的詳細信息，但它不顯示在屏幕上

Answer 1

在您的beaconDetails組件中，您需要將值與密鑰一起傳遞給InfoRow compoent，並執行對null的檢查。同時你並不需要一個return語句在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}/>) 
      }) 
     } 

，並在您InfoRow compoent可以顯示該值

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

你也可以改變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> 

      ) 

     } 


    }