state
動的セグメントのパスで react-router によってロードされるコンポーネントの取得に問題があります/item/:id
:
var Item = React.createClass({
mixins: [State],
getInitialState: function () {
return {data: {}};
},
loadTrackData: function () {
api.getItemById(this.getParams().id, function (data) {
this.setState({data: data});
}.bind(this));
},
componentDidMount: function () {
this.loadTrackData();
},
componentWillReceiveProps: function () {
this.loadTrackData();
},
render: function () {
console.log(this.state); // empty `data` object
return (
<div>
<h2>{this.state.data.title.prop}</h2> // doesn't work
// but works with
// <h2>{this.state.data.title}</h2>
</div>
);
}
});
これらのメソッドのいずれも呼び出さcomponentDidMount
れcomponentWillReceiveProps
ません。
そして、レンダリングは初期化されたばかりの空data
のオブジェクトをログに記録します..
ルーターは次のようになります。
var routes = (
<Route path="/" handler={Index}>
<Route name="stream" path="/item/:id" handler={Item} />
<DefaultRoute handler={Dashboard} />
</Route>
);