reactで、apiから取得したjsonの要素にアクセスできない。

Question

reactで、デモを作成しようとしています。

djang rest apiから、下記のようなjsonを受け取ります。

{
    "company": {
        "name": "会社名",
        "code": 0,
        "type": ""
    },
    "risk_category": 1,
    "rank": "D",
    "title": "見出し",
    "contents": "本文",
    "date": "2016-08-31T04:04:05Z"
}

class RiskDetailBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      risk: {}
    };
  }

  loadRiskFromServer(id) {
    $.ajax({
      url: "http://127.0.0.1:8000/api/risks/"+id,
      dataType: 'json',
      cache: false,
      success: data => this.setState({risks: data}),
      error: (xhr, status, err) => console.error(this.props.url, status, err.toString())
    });
  }

  componentDidMount() {
    this.loadRiskFromServer(this.props.params.id);
  }

  componentWillReceiveProps() {
    this.loadRiskFromServer(this.props.params.id);
  }

  render() {
    console.log(this.state.risk);
    return (
      <div className="wrapper subpageheader mdl-cell--12-col">
        <h1>Risk</h1>
        <RiskDetailTable data={this.state.risk} />
      </div>
    );
  }
}


class RiskDetailTable extends Component {
  render() {
    // 下のjsでmapだとうまくいけるのか？っとtryしてみましたが当然だめでした。
    let riskNodes = [this.props.data].map(risk => {
      return (
        <RiskBody company={risk.company.name} title={risk.title} date={risk.announcement_date} />
      );
    });
    return (
      <table className="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <tbody>{riskNodes}</tbody>
      </table>
    );
  }
}


class RiskBody extends Component {

  render() {
    return (
      <tbody>
        <tr>
          <th class="mdl-data-table">企業名</th>
          <td>{this.props.company}</td>
        </tr>
        <tr>
          <th class="mdl-data-table">業種</th>
          <td></td>
        </tr>
        <tr>
          <th class="mdl-data-table">記事掲載日時</th>
          <td class="mdl-data-table">{this.props.date}</td>
        </tr>
        <tr>
          <th class="mdl-data-table">記事</th>
          <td class="mdl-data-table">{this.props.title}</td>
        </tr>
      </tbody>
    )
  }
}

export default RiskDetailBox;

company.nameを出力したいのですが、
company配下にアクセスしようとすると、
DetailPage.js:86 Uncaught TypeError: Cannot read property 'name' of undefined
となり、出力できません。

上記のjsonをリスト形式で、受け取り下記のコードで一覧表示させた場合には、company.nameに問題なくアクセスできました。

import React, {Component} from 'react';
import './App.css';
import $ from 'jquery';
import { Link } from 'react-router';

const styles = {
  propContainer: {
    width: 200,
    overflow: 'hidden',
    margin: '20px auto 0',
  },
  propToggleHeader: {
    margin: '20px auto 10px',
  },
};

class RiskListTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      risks: []
    };
  }

  loadRisksFromServer() {
    $.ajax({
      url: "http://127.0.0.1:8000/api/risks/",
      dataType: 'json',
      cache: false,
      success: data => this.setState({risks: data}),
      error: (xhr, status, err) => console.error(this.props.url, status, err.toString())
    });
  }

  componentDidMount() {
    this.loadRisksFromServer();
  }

  render() {
    return (
      <div className="wrapper subpageheader mdl-cell--12-col">
        <h1>Risks</h1>
        <Link to="/detail/100">detail</Link>
        <RiskList data={this.state.risks} />
      </div>

    );
  }
}

class RiskList extends Component {
  render() {
    console.log(this.props.data[0]);
    let riskNodes = this.props.data.map(risk => {
      return (
        <Risk company={risk.company.name} key={risk.id} title={risk.title} date={risk.announcement_date} />
      );
    });
    return (
      <table className="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <thead>
        <tr>
          <th className="mdl-data-table">企業名</th>
          <th className="mdl-data-table">記事掲載日時</th>
          <th className="mdl-data-table">見出し</th>
        </tr>
        </thead>
        <tbody>{riskNodes}</tbody>
      </table>
    );
  }
}
class Risk extends Component {

  render() {
    return (
      <tr>
        <td class="mdl-data-table">{this.props.company}</td>
        <td class="mdl-data-table">{this.props.date}</td>
        <td class="mdl-data-table">{this.props.title.substring(0,70)}</td>
      </tr>
    )
  }
}

export default RiskListTable;

アドバイス、ご指摘お願いします。

Answer 1

this.state = {
risk: []
};
に変更したら、出力できました><

reactについて整理しないとだめだな・・・