从服务器获取的数据没有在 ReactJS 中显示 [英] Data fetched from server is not getting diplayed in ReactJS
问题描述
import React, { Component } from 'react';import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';从 'classnames' 导入类名；让 _ = require('lodash');从'react-chartjs-2'导入{Doughnut}；从redux"导入{bindActionCreators}；从'react-redux'导入{connect}；从'../../actions/'导入{fetchedBeacons}；//常量信标 = {//_id: 'jslg',//名称: '信标 1',//描述: '这里有东西',//状态:'活动'，//制造商:'EDDY'，//楼层: '一楼',//位置:'入口'//};//const AdvanceBeacon = {//uuid: '452-457-854-521-125',//专业:'7458-458-56'，//次要:'7458-665'，//信标类型:'蓝牙'//};常量图表数据 = {标签:['周三'，'昨天'，'今天']，数据集:[{标签:'我的第一个数据集'，borderColor: 'rgba(255,255,255,.55)',数据:[856, 785, 785],背景颜色: ['#063e70','#107bb5','#666666']}],};//TODO - 起一个像样的名字类 InfoRow 扩展组件 {使成为() {返回 (<tr><td>{this.props.beacon}</td><td>{this.props.beacon}</td></tr>)}}类 InfoRows 扩展组件 {使成为() {返回 (<tr><td>{this.props.beacon.major}:</td><td>{this.props.beacon.minor}</td><td>{this.props.beacon._id}</td></tr>)}}类 BeaconChartAnalysis 扩展组件 {使成为() {返回 (<div className="col-lg-6"><甜甜圈数据={ChartData}/><br/>)}}类 BeaconDetails 扩展组件 {构造函数(道具){超级(道具)；this.toggle = this.toggle.bind(this);this.state = {活动标签:'1'};}切换(标签){if (this.state.activeTab !== tab) {this.setState({activeTab:选项卡});}}使成为() {常量行 = [];让 a = this.props.bcn;Object.keys(a).map(function(keyName, keyIndex){让 b = a[keyName];控制台日志(b);return rows.push( .</TabPane><TabPane tabId="2"><div className="col-lg-6"><table className="table table-clear"> </TabPane></TabContent> )}}类 BeaconDetailComponent 扩展组件 {componentWillMount = () =>{this.props.fetchedBeacons(this.props.location.query.id);};使成为() {返回 (<div className="容器"><div className="row"><div className="col-md-6 col-md-offset-3"><h1>信标信息{this.props.location.query.id}</h1></div> <br/><br/>{ this.props.bcn != null?<div className="row"><BeaconDetails bcn={this.props.bcn}/><BeaconChartAnalysis/> :<center><h1>...加载</h1></center>} )}}函数 mapStateToProps(state) {返回 {bcn: state.beacons}}函数 matchDispatchToProps(dispatch){返回 bindActionCreators({fetchedBeacons: fetchedBeacons}, dispatch);}export default connect(mapStateToProps, matchDispatchToProps)(BeaconDetailComponent); 我提供了代码片段我想要的是显示从服务器获取的详细信息我还提供了控制台数据正在显示但在屏幕上没有的屏幕截图您可以看到从服务器获取的对象及其详细信息显示在控制台中但未显示在屏幕上的图像 在您的信标详细信息组件中，您需要将值与键一起传递给 InfoRow 组件，并执行空值检查.此外，您不需要 并且在您的 InfoRow 组件中您可以显示此值 你也可以把beaconsDetail组件改成这样 .</TabPane><TabPane tabId="2"><div className="col-lg-6"><table className="table table-clear"> </TabPane></TabContent> )}}
i had provided the code snippet
what i wanted is to show the details fetched from the server
i also provided the screenshot that in console data is getting displayed but on the screen it is not
Image you can see the object being fetched from the server and its details being displayed in the console but it is not showing on the screen In your beaconDetails compoenent you need to pass the value to the InfoRow compoent along with the key and also perform a check for null. Also you don't need a return statement in the and in your InfoRow compoent you can display this value You can also change the beaconsDetail component to be like
这篇关于从服务器获取的数据没有在 ReactJS 中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！map 函数中的 return 语句，因为您将对象推送到行数组 const rows = [];让 a = this.props.bcn;//console.log(a);如果(一个！=未定义){Object.keys(a).map(function(value, keyIndex){console.log(a[value]);rows.push(<InfoRow beaconKey={value} beaconValue={a[value]} key={keyIndex}/>)})}class InfoRow extends Component {使成为() {返回 (<tr><td>{this.props.beacon}</td><td>{this.props.beaconValue}</td></tr>)}}class BeaconDetails 扩展组件 {构造函数(道具){超级(道具)；this.toggle = this.toggle.bind(this);this.state = {活动标签:'1'};}切换(标签){if (this.state.activeTab !== tab) {this.setState({activeTab:选项卡});}}使成为() {常量行 = [];//this.props.bcn.map( item => {//return row.push(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);map function since you are pushing object to the row array 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}/>)
})
}
class InfoRow extends Component {
render() {
return (
<tr>
<td>{this.props.beacon}</td>
<td>{this.props.beaconValue}</td>
</tr>
)
}
}
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>
)
}
}
登录
关闭
