如何在卡的形式在reactjs

Question

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> &nbsp; {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> &nbsp; Share</a></li> 
           <li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> &nbsp; Edit</a></li> 
           <li><a href="javascript:void(0)"><i className="fa fa-copy"></i> &nbsp; Duplicate</a></li> 
           <li className="divider"></li> 
           <li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> &nbsp; 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 
      }) 
     }) 

} 

，並在渲染 返回{卡}

我從服務呼叫有多個連接，我需要每個獲得的數據顯示迴路數據連接在一張卡片上。我需要在reactjs中循環。

，但我不能來填充數據卡的形式，任何人都可以幫我在這在我發佈的{卡}沒有定義

Answer 1

而不是在componentDidMount方法遍歷數據 顯示卡的回報，將state變量的響應數據設置爲setState，並從render方法中調用一個方法並在其中創建卡片ui。

所有的UI創建部分應該只在render方法。

我會建議你使用map而不是for loop。

寫這樣的：

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> &nbsp; {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> &nbsp; Share</a></li> 
           <li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> &nbsp; Edit</a></li> 
           <li><a href="javascript:void(0)"><i className="fa fa-copy"></i> &nbsp; Duplicate</a></li> 
           <li className="divider"></li> 
           <li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> &nbsp; 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> 
    ) 
} 

更新：

使用地圖，而不是爲循環：

_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> &nbsp; {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> &nbsp; Share</a></li> 
            <li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> &nbsp; Edit</a></li> 
            <li><a href="javascript:void(0)"><i className="fa fa-copy"></i> &nbsp; Duplicate</a></li> 
            <li className="divider"></li> 
            <li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> &nbsp; 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>) 
    ); 
} 

Answer 2

for (var i = 0; i < data; i++)應該for (var i = 0; i < data.length; i++)

Answer 3

這是一個總理候選人使用.map

render(){ 
    return (
    <div> 
     {this.state.data.map((val, idx) => (
     <div className="col-md-3"> 
      ... rest of card ... 
     </div> 
    ))} 
    </div> 
) 
}