如何以多个秒显示来自 .map 函数的数据<div>

Question

我已经研究这段代码一段时间了。这就是过程：

我正在从服务器检索一些数据。这些数据将使用.map功能显示在卡片上。

问题是：它们显示在卡片上，但没有显示在附加的模式上

关注带有双斜杠注释的代码块"//">

// I started with the map function here 
if(this.state.isLoading === false) {
this.state.data.map((datii,i) => {
if(isClicked){
generateButton =    
<button type="button" className="btn btn-primary" id="postStatus"
data-dismiss="modal" data-toggle="modal" data-target={"#exampleModal2"} 
onClick={this.handleGeneratedClick} aria-label="Close">
Post on social media
</button>
generated = <div className="row">
<p className="col-3"><b>Generated Link:</b></p>
<p className="col-9">The generated link</p>
</div>
}else {        
generateButton = <button type="button" className="btn btn-primary" onClick={this.handleGeneratedClick}>
Generate link
</button>
generated = <div/>
}
return(
content.push(
<div className="contents" key={datii.campaignId}>

//datii not showing visible here
////modal 1 div
<div className="modal fade" id={"exampleModal"} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel"><b>CAMPAIGN DETAILS</b></h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body" >
<div className="container-fluid text-left">
<div className="row">
<p className="col-3"><b>Name:</b></p>
<p className="col-9">{datii.campaignName}</p>
</div>
<div className="row">
<p className="col-3"><b>Duration:</b></p>
<p className="col-9">{datii.startTime + " - " + datii.endTime }</p>
</div>
<div className="row">
<p className="col-3"><b>Hashtags:</b></p>
<p className="col-9">{datii.hashTags}</p>
</div>
<div className="row">
<p className="col-3"><b>Image(s):</b></p>
<div className="col-9">
<div className="row">

<img src="" className="img-fluid mx-auto d-block col-6" alt="campaigns" />
<img src="" className="img-fluid mx-auto d-block col-6" alt="campaigns" />
</div>
</div>
</div>

{generated}
</div>
</div>

<div className="modal-footer align-self-center">
{generateButton}
</div>
</div>
</div>
</div>

//and here either
//modal 2 div

<div className="modal fade" id={"exampleModal2"+i} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h3 className="modal-title" id="exampleModalLabel2"><b>Share on social media</b></h3>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
<div className="container-fluid">
<div className="row">
<h5 className="col text-left p-0"><b>{datii.campaignName}</b></h5>
</div>
<div className="row">
<textarea className="form-control" id="exampleFormControlTextarea1" rows="3">
</textarea>
</div>
<div className="mb-4">
<div className="row">
<button type="button" className="btn btn-primary col-5">Post</button>
</div>
</div>
</div>
</div>
</div>

//datii is only visible here
//card div

<div className="card text-center">
<div className="card-body">
<h5 className="card-title"><b>{datii.campaignName}</b></h5>
<p className="card-text">{this.state.data[i].samplePost}</p>
<button className="btn btn-primary viewbtn" data-toggle="modal" data-target={"#exampleModal"+i}>View</button>
</div>
</div>
</div>            

Answer 1

您必须向我们展示您的代码！

但凭直觉，这就是如何从.map函数中渲染多个divs

return this.state.serverresponse.map(x=> (
<div>
<ExampleComponent
prop1={x.id}
prop2={x.data}
prop3={x.binary}
prop4={x.label}
/>
</div>
));

this.state.serveresponse是我存储服务器结果的地方，在我的情况下，服务器是一个对象数组。