[英]how to display loop data in the form of card in reactjs
the info of all the fields i am getting after post need to show in the card but not displaying我在发布后获得的所有字段的信息需要显示在卡片中但不显示
componentDidMount() {
var component = this;
fetch('http://localhost:8080/UIServices/rest/dataService/getUserDetails?userName=SIVASO')
.then(function(response) {
return response.json()
}).then(function(json) {
var data = JSON.stringify(json);
var cards = [];
for (var i = 0; i < data; i++) {
cards.push(<div className="col-md-3">
<div className="panel panel-default datasource_panel">
<div className="panel-heading">
<h5 className="panel_title"><i className="fa fa-database"></i> {data[i].dataConnectionName}</h5>
<div className="panel_actions">
<ul className=" list-unstyled">
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" data-target="#">
<i className="fa fa-ellipsis-v"></i>
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)"><i className="fa fa-share-alt"></i> Share</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> Edit</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-copy"></i> Duplicate</a></li>
<li className="divider"></li>
<li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> Delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div className="panel-body">
<div className="datasource_txt text-center">
<h4>{data[i].dataConnectionType}</h4>
<h6>{data[i].dataConnectionSid}</h6>
<p>{data[i].description}</p>
</div>
</div>
</div>
</div>);
}
component.setState({
data: json
})
})
}
and In the render return {cards}并在渲染返回 {cards}
I am getting the data from service call having multiple connections I need each connection in a card.我从具有多个连接的服务调用中获取数据,我需要卡中的每个连接。 I need to loop in reactjs.
我需要在 reactjs 中循环。
but I am not able to populate the data in the form of cards can anyone help me in this in the return I posted {cards} showing cards not defined但我无法以卡片的形式填充数据,任何人都可以在我发布的{cards}显示未定义的卡片的回报中帮助我
Instead of looping over data in componentDidMount
method, set the response data in state
variable by setState
and call a method from render method and create the cards ui inside that.不是在
componentDidMount
方法中循环数据,而是通过setState
在state
变量中设置响应数据,并从 render 方法调用一个方法并在其中创建卡片 ui。
All the ui creation part should be in render
method only.所有 ui 创建部分应该只在
render
方法中。
I will suggest you to use map instead of for loop
.我建议你使用map而不是
for loop
。
Write it like this:像这样写:
componentDidMount() {
fetch('http://localhost:8080/UIServices/rest/dataService/getUserDetails?userName=SIVASO')
.then((response) => {
return response.json()
}).then((json) => {
this.setState({data: json})
})
}
_createCardsUI(){
let cards = [], data = this.state.data;
for (var i = 0; i < data.length; i++) {
cards.push(<div className="col-md-3">
<div className="panel panel-default datasource_panel">
<div className="panel-heading">
<h5 className="panel_title"><i className="fa fa-database"></i> {data[i].dataConnectionName}</h5>
<div className="panel_actions">
<ul className=" list-unstyled">
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" data-target="#">
<i className="fa fa-ellipsis-v"></i>
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)"><i className="fa fa-share-alt"></i> Share</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> Edit</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-copy"></i> Duplicate</a></li>
<li className="divider"></li>
<li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> Delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div className="panel-body">
<div className="datasource_txt text-center">
<h4>{data[i].dataConnectionType}</h4>
<h6>{data[i].dataConnectionSid}</h6>
<p>{data[i].description}</p>
</div>
</div>
</div></div>);
}
return cards;
}
render(){
return (
<div>
{this._createCardsUI()}
</div>
)
}
Update:更新:
Use map instead of for loop:使用 map 而不是 for 循环:
_createCardsUI(){
var data = this.state.data;
return data.map(el => (
<div className="col-md-3">
<div className="panel panel-default datasource_panel">
<div className="panel-heading">
<h5 className="panel_title"><i className="fa fa-database"></i> {el.dataConnectionName}</h5>
<div className="panel_actions">
<ul className=" list-unstyled">
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" data-target="#">
<i className="fa fa-ellipsis-v"></i>
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)"><i className="fa fa-share-alt"></i> Share</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> Edit</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-copy"></i> Duplicate</a></li>
<li className="divider"></li>
<li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> Delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div className="panel-body">
<div className="datasource_txt text-center">
<h4>{el.dataConnectionType}</h4>
<h6>{el.dataConnectionSid}</h6>
<p>{el.description}</p>
</div>
</div>
</div>
</div>)
);
}
for (var i = 0; i < data; i++)
应该是for (var i = 0; i < data.length; i++)
This is a prime candidate for the use of .map
这是使用
.map
的主要候选者
render(){
return (
<div>
{this.state.data.map((val, idx) => (
<div className="col-md-3">
... rest of card ...
</div>
))}
</div>
)
}
how to display data in card in reactjs如何在reactjs中显示卡片中的数据
this.state = {
approvedCount:"",
disapprovedCount:"",
pendingCount:"",
bigChartData: "data1",
axios.get(`http://192.168.1.153:8080/vlock/poll/status`, headers, data)
// console.log("header")
.then((res) => {
// console.log("RESPONSE = ", res.data);
this.setState
console.log(res.message);
});
({ pulls: res.data });
<Card className="mb-4" style={{ color: "" }}>
<CardBody>
<br />
<center>
{" "}
<FaPoll style={{ color: "blue" }} />
</center>
<center>
{" "}
<CardTitle>Polls Approved</CardTitle>
</center>
<center>
{" "}
<p style={{ color: "blue" }}>{this.state.approvedCount}</p>
</center>
</CardBody>
</Card>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.