antd table 数组循环

1，接口返回数据结构

{
    "success": 1,
    "msg": "获取成功",
    "total": 2130,
    "limit": 10,
    "data": [
        {
            "id": 40,
            "claxx_times": [
                {
                    "course_week": "星期二",
                    "course_start": "17:30",
                    "course_end": "19:30"
                },
                {
                    "course_week": "星期一",
                    "course_start": "13:16",
                    "course_end": "14:01"
                }
            ]
        },
          
    ]
}

2，主要代码如下

render: claxx_times => (
          <span>
            {claxx_times.map(c => <div key={c.course_end}>{c.course_week}&nbsp;&nbsp;{c.course_start}&nbsp;-&nbsp;{c.course_end}</div>)}
          </span>
        )

3，详细代码如下 

import React, { PureComponent } from "react";
import { findDOMNode } from "react-dom";
import moment from "moment";
import { Link } from "react-router-dom";
import { connect } from "dva";


import styles from "./gradeList.less";

const FormItem = Form.Item;

@Form.create()
class GradeList extends PureComponent {
  deleteGrade = id => {
    const { dispatch } = this.props;
    dispatch({ type: "grade/deleteGrade", payload: { id: id } });
  };
  queryDeltail = id => {
    const { dispatch } = this.props;
    dispatch({ type: "grade/detail", payload: { id: id } });
  };
  handleOk = () => {
    const { dispatch } = this.props;

    dispatch({ type: "grade/hideModal" });
  };
  handleCancel = () => {
    const { dispatch } = this.props;

    dispatch({ type: "grade/hideModal" });
  };
  onchange = (page, pageSize) => {
    const { dispatch, form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: "grade/fetch",
          payload: { page: page, limit: pageSize, ...values }
        });
      }
    });
  };
  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;

    form.validateFields((err, values) => {
      if (!err) {
        dispatch({ type: "grade/fetch", payload: { ...values } });
      }
    });
  };
  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
  };

  render() {
    const gradeList = this.props.gradeList;
   
    const grade =
      JSON.stringify(gradeDetails) !== "[]" ? gradeDetails.grade : [];
    const modalVisible = this.props.modalVisible;
    const { dispatch } = this.props;
    const width = 1200;

    const pagination = {
      total: this.props.total,
      pageSize: 10,
      onChange: this.onchange
    };

    const columns = [
      {
        title: "上课时间",
        dataIndex: "claxx_times",
        key: "claxx_times",
        render: claxx_times => (
          <span>
            {claxx_times.map(c => <div key={c.course_end}>{c.course_week}&nbsp;&nbsp;{c.course_start}&nbsp;-&nbsp;{c.course_end}</div>)}
          </span>
        )
      },
    ];

    return (
      <div className={styles.listback}>
       
 
        <Table
          columns={columns}
          dataSource={gradeList}
          rowKey={record => record.id}
          pagination={pagination}
        />
        <Modal
          width={width}
          visible={modalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        />
      </div>
    );
  }
}
function mapStateToProps(state) {
  return { ...state.grade };
}
export default connect(mapStateToProps)(GradeList);

4，效果图如下