reactで、デモを作成しようとしています。
djang rest apiから、下記のようなjsonを受け取ります。
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;
ご存知の方、アドバイスやご指摘お願いします><