反应表-显示嵌套对象字段

Question

嘿，所以我无法一生解决这个问题。 SOS。

我有一个带有嵌套对象的JSON，如下所示：

[
{

    "id": 1,
    "internalToolName": "HP ALM",
    "statuses": [
        {
            "id": 57,
            "statusType": "Ok",
            "date": "2018-12-17"
        },
        {
            "id": 67,
            "statusType": "Ok",
            "date": "2018-12-23"
        },
        {
            "id": 37,
            "statusType": "Ok",
            "date": "2018-01-06"
        }
 },{
    "id": 2,
    "internalToolName": "Artifactory",
    "appType": null,
    "statuses": [
        {
            "id": 1652,
            "statusType": "Ok",
            "date": "2018-12-31"
        },
        {
            "id": 119,
            "statusType": "Ok",
            "date": "2018-12-28"
        }
 }

]

我正在尝试填充像this这样的反应表

我能够使用“内部工具”标题填充工具名称行，并填充当月的日期。我在弄清楚用状态对象的给定日期字段上的状态填充单元格的逻辑时遇到了麻烦。这是我的代码：

export default class ToolsIssue2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      month: moment().format('MMMM, YYYY'),
      internalToolData: [{
        internalToolName: '',
        statuses: [{
          date: '',
          statusType: '',
        }]
      }],
    }
  }

  componentDidMount() {
    this.generateData();
  }

  generateData() {
    axios.get('http://localhost:8080/internal_tool')
      .then(response => {
        this.setState({
          internalToolData: response.data
        });
        console.log(this.state.internalToolData);
      }).catch(error => alert(error));
  }

  setStatusSVG(statusType) {
    switch (statusType) {
      case 'Ok': return <img src={ok} className='OK' alt='ok-logo' />
      case 'Warning': return <img src={warning} className='Warning' alt='warning-logo' />
      case 'Unavailable': return <img src={unavailable} className='Unavailable' alt='unavailable-logo' />
    }
  }

  getMonth() {
    return moment().format('MMMM, YYYY');
  }

  getCurrentColumns() {
    var daysInMonth = moment().daysInMonth();
    var monthDaysColumn = [];
    for (var i = 1; i <= daysInMonth; i++) {
      monthDaysColumn.push(
        {
          // id: 'statusDate',
          Header: i,
          accessor: 'statuses',
          Cell: (row) => {
            if(moment(`${row.row.statuses.date}`).year() === moment().year() && moment(`${row.row.statuses.date}`).date() === i) {
              this.setStatusSVG(row.row.statuses.statusType);
            }
          },
          resizable: false,
          sortable: false,
          width: 35,
        })
    }
    return monthDaysColumn;
  }

  render() {
    const { internalToolData } = this.state;
    return (
      <div>
        <ReactTable
          data={internalToolData}
          columns={[{
            Header: 'Internal Tools',
            columns: [{
              accessor: 'internalToolName',
              width: 150,
              resizable: false,
            }]
          }, {
            Header: this.getMonth(),
            columns: this.getCurrentColumns(),
          }
          ]}
          defaultPageSize={15}
          className="-striped -highlight"
        />
        <br />
      </div>
    )
  }
}