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

Question

＆＃ 13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我提供了代码段 我想要的是显示从服务器获取的详细信息 我还提供了屏幕截图，在控制台数据中显示但在屏幕上却没有显示 您可以在图像中看到从服务器获取的对象及其详细信息显示在控制台中但未在屏幕上显示

Answer 1

在beaconDetails compoenent中，您需要将值与密钥一起传递给InfoRow组件，并执行null检查。你也不需要在map函数中使用return语句，因为你将对象推送到行数组

 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组件中，您可以显示此值

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>

            )

        }


    }