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

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

但是要直觉，这是从divs函数渲染多个.map的方式

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

          />
        </div>
      ));

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

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

1 个答案: