在reactjs中迭代对象的数组

Question

我是reactjs的新手，因为我想知道如何呈现表中的项目列表。

我的对象的样本阵列是：

[ 
{description:"test leave" 
end_date:"2017-05-16" 
id:1 
name:"new year" 
start_date:"2017-05-16"}, 

{description:"Diwali eve" 
end_date:"2017-10-22" 
id:2 
name:"diwali" 
start_date:"2017-10-22"} 
] 

我的代码是：

import React from 'react'; 
import { Router, Link , Route, Switch ,browserHistory } from 'react-router'; 
import {holidaydetails} from '../actions/index.jsx' 
import {holidaydetailreducer} from '../reducers/holidaydetails.jsx' 
import thunk from 'redux-thunk'; 
import ReduxPromise from 'redux-promise'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 


class HolidaysList extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      HolidayList: [] 
     }; 
    } 

    componentDidMount() 
    { 
      this.props.holidaydetails(); 
      this.setState({HolidayList:this.props.holidaydetails()}) 

    } 


    render(){ 
      const rows = this.props.HolidayList.holidaylist_data; 
      console.log(rows,'rows implementation!!!!!'); 

     return(
      <div className="container"> 
       <div className="row"> 
        <div className="margin"> 
         <div className="col-md-12"> 
          <div className="main_content"> 
           <div className="row"> 
            <div className="col-md-12"> 
             <div className="row"> 
              <div className="col-sm-12" data-offset="0"> 
               <div className="panel panel-info"> 
                <div className="panel-heading"> 
                 <div className="panel-title"> 
                  <strong>List of All Events</strong> 
                 </div> 
                </div> 
                <table className="table table-bordered table-hover" id="dataTables-example"> 
                 <thead> 
                  <tr> 
                   <th>SL.NO</th> 
                   <th className="col-sm-3">Event Name</th> 
                   <th className="col-sm-1">Start Date</th> 
                   <th className="col-sm-1">End Date</th> 
                   <th>Description</th> 
                   <th className="col-sm-1">Action</th> 
                  </tr> 
                 </thead> 
                 <tbody> 

                 </tbody> 
                </table> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state,props) { 
    console.log(state,'state in holidaylist') 
    return { 
    HolidayList: state 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    holidaydetails: holidaydetails}, dispatch); 
} 



export default connect(mapStateToProps, mapDispatchToProps)(HolidaysList); 

在上面的代码中，我有行对象包含在阵列中的所有对象列表。

在此先感谢，
任何帮助表示赞赏。

Answer 1

您需要映射在你的数据，如

<tbody> 

{rows && rows.map((holiday) => { 
    return <tr key={holiday.id}> 
       <td>{holiday.id}</td> 
       <td>{holiday.name}</td> 
       <td>{holiday.start_date}</td> 
       <td>{holiday.end_date}</td> 
       <td>{holiday.description}</td> 
       <td><button onClick={() => this.someAction(param)}>Action</button></td> 
      </tr> 
})} 
</tbody> 

Answer 2

试试这个

render() { 

      return (
     <table> 
      <tbody>{this.state.todos.map((todo, i) => <Todo key={i} todos= {todo} />)}</tbody> 
     </table> 
    ); 
     } 

藤组件

类藤扩展React.Component {

render() { 

     return (
      <tr> 
      <td>{this.props.todos.id}</td> 
      <td>{this.props.todos.name}</td> 
      <td>{this.props.todos.company}</td> 
     </tr> 
    ); 
    } 
} 

出口默认待办事项;