在reactjs中迭代对象数组

我是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);

从“React”导入React；
从“react Router”导入{路由器、链路、路由、交换机、浏览器历史记录}；
从“../actions/index.jsx”导入{holidaydetails}
从“../reducers/holidaydetails.jsx”导入{holidaydetailreducer}”
从“redux thunk”导入thunk；
从“redux承诺”导入redux承诺；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
类HolidaysList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
度假清单：[]
};
}
componentDidMount（）
{
this.props.holidaydetails（）；
this.setState（{HolidayList:this.props.holidaydetails（）}）
}
render（）{
const rows=this.props.HolidayList.HolidayList\u数据；
日志（行，行实现！！！）；
返回(
所有事件的列表
序号
事件名称
开始日期
结束日期
描述
行动
);
}
}
函数mapStateToProps（状态、道具）{
log（state，'stateinholidaylist'）
返回{
度假名单：州
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
holidaydetails:holidaydetails}，调度）；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（HolidaysList）；

在上面的代码中，我有一个rows对象，它包含数组中的所有对象列表

提前感谢，
感谢您的帮助。

试试这个

 render() {

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

render（）{
返回(
{this.state.todos.map（（todo，i）=>）}
);
}

Todo组件

类Todo扩展了React.Component{

   render() {

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

render（）{
返回(
{this.props.todos.id}
{this.props.todos.name}
{this.props.todos.company}
);
}
}

---

导出默认Todo

您需要映射数据，如

<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>

{rows&&rows.map（（假日）=>{
返回
{holiday.id}
{holiday.name}
{假日.开始日期}
{假日结束日期}
{holiday.description}
this.someAction（param）}>Action
})}

可能重复的@chris it不起作用。感谢您的帮助这不是一个todo，当您回答时，您应该根据OP的需要修改您的答案，或者指向相应的链接我无法读取未定义（…）的属性“map”，在尝试使用您的codepriya时，您能告诉我哪个是数据变量吗，是否来自this.state.HolidayList？如果不是，您可以使用相应的数据变量。我正在获取组件中的this.props.HolidayList.HolidayList\ u数据。当我通过尝试const row=this.props.HolidayList.HolidayList_data更新答案进入组件内部的控制台时，利用rowsI更新了我的答案，仍然没有定义相同的问题映射。